Option select example

With aria controls

aria_controls_id adds an aria-controls attribute to each checkbox input. This makes it easier for users of assitive tech to jump from them to the part of the page they’re updating.

The aria_controls_id must be set to the ID of an element that’s on the page or it won’t be included.

How it looks (preview)

List of options (with aria controls)

Britain
France
Spain

How to call this example

<%= render "govuk_publishing_components/components/option_select", {
  key: "with_aria-control_set",
  title: "List of options (with aria controls)",
  aria_controls_id: "wrapper",
  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"
    }
  ]
} %>