1. Finder Frontend Component Guide
  2. Option select
  3. Closed on load
Option select example

Closed on load

How it looks (preview)

List of hats

List of hats

How to call this example

<%= render "govuk_publishing_components/components/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"
    }
  ]
} %>