1. Static Component Guide
  2. Option select

Component

Option select

A scrollable list of checkboxes to be displayed on a form where one might otherwise use a multi-select

How to call this component

<%= render "govuk_component/option_select" {
  key: "market_sector",
  title: "Market sector",
  options_container_id: "list_of_sectors",
  options: [
    {
      value: "aerospace",
      label: "Aerospace",
      id: "aerospace"
    },
    {
      value: "agriculture-environment-and-natural-resources",
      label: "Agriculture, environment and natural resources",
      id: "agriculture-environment-and-natural-resources"
    },
    {
      value: "building-and-construction",
      label: "Building and construction",
      id: "building-and-construction"
    },
    {
      value: "chemicals",
      label: "Chemicals",
      id: "chemicals"
    },
    {
      value: "clothing-footwear-and-fashion",
      label: "Clothing, footwear and fashion",
      id: "clothing-footwear-and-fashion"
    },
    {
      value: "defence",
      label: "Defence",
      id: "defence"
    },
    {
      value: "distribution-and-service-industries",
      label: "Distribution and Service Industries",
      id: "distribution-and-service-industries"
    },
    {
      value: "electronics-industry",
      label: "Electronics Industry",
      id: "electronics-industry"
    },
    {
      value: "energy",
      label: "Energy",
      id: "energy"
    },
    {
      value: "engineering",
      label: "Engineering",
      id: "engineering"
    },
    {
      value: "financial-services",
      label: "Financial services",
      id: "financial-services"
    },
    {
      value: "fire-police-and-security",
      label: "Fire, police, and security",
      id: "fire-police-and-security"
    },
    {
      value: "food-manufacturing",
      label: "Food manufacturing",
      id: "food-manufacturing"
    },
    {
      value: "giftware-jewellery-and-tableware",
      label: "Giftware, jewellery and tableware",
      id: "giftware-jewellery-and-tableware"
    }
  ]
} %>

How it looks

Market sector

Accessibility acceptance criteria

Options on desktop should not be full width to let users interact with the scrollbar without accidentally clicking an option

Other examples (preview all)

With option pre checked (preview)

<%= render "govuk_component/option_select" {
  key: "with_checked_value_set",
  title: "List of options",
  options_container_id: "list_of_vegetables",
  options: [
    {
      value: "potatoes",
      label: "Potatoes",
      name: "potatoes",
      checked: true
    },
    {
      value: "carrots",
      label: "Carrots",
      id: "carrots"
    },
    {
      value: "mash",
      label: "Mash",
      id: "mash"
    }
  ]
} %>
List of options

With aria controls (preview)

<%= render "govuk_component/option_select" {
  key: "with_aria-control_set",
  title: "List of options",
  aria_controls_id: "js-update-region-id",
  options_container_id: "list_of_countries",
  options: [
    {
      value: "britain",
      label: "Britain",
      id: "britain"
    },
    {
      value: "france",
      label: "France",
      id: "france"
    },
    {
      value: "spain",
      label: "Spain",
      id: "spain"
    }
  ]
} %>
List of options

Closed on load (preview)

<%= render "govuk_component/option_select" {
  key: "closed_on_load",
  title: "List of hats",
  closed_on_load: true,
  options_container_id: "list_of_hats",
  options: [
    {
      value: "bobble_hat",
      label: "Bobble hat",
      id: "bobble_hat"
    },
    {
      value: "fez",
      label: "Fez",
      id: "fez"
    },
    {
      value: "sombrero",
      label: "Sombrero",
      id: "sombrero"
    }
  ]
} %>
List of hats