1. Static Component Guide
  2. Option select
  3. With aria controls

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 to call this example

<%= 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"
    }
  ]
} %>

How it looks

List of options