Option select example

With button data attributes

Allows data attributes to be passed to the component to be added to the expand/collapse button. The attributes are written to the parent element then read by the JavaScript and applied to the button. This is used for tracking purposes.

How it looks (preview)

Market sector

Aerospace

Agriculture, environment and natural resources

How to call this example

<%= render "govuk_publishing_components/components/option_select", {
  key: "market_sector",
  title: "Market sector",
  options_container_id: "list_of_sectors",
  button_data_attributes: {
    ga4_expandable: "",
    ga4_event: {
      event_name: "select_content",
      type: "finder"
    }
  },
  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"
    }
  ]
} %>