Component

Select

A dropdown select

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/select", {
  id: "dropdown1",
  label: "My Dropdown",
  options: [
    {
      text: "Option one",
      value: "option1"
    },
    {
      text: "Option two",
      value: "option2"
    },
    {
      text: "Option three",
      value: "option3"
    }
  ]
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

• Select

Accessibility acceptance criteria

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• indicate when it has focus

Other examples

With different id and name (preview)

If no name is provided, name defaults to the (required) value of id.

<%= render "govuk_publishing_components/components/select", {
  id: "dropdown1-1",
  label: "My Dropdown",
  name: "dropdown[1]",
  options: [
    {
      text: "Option one",
      value: "option1"
    },
    {
      text: "Option two",
      value: "option2"
    }
  ]
} %>

With preselect (preview)

<%= render "govuk_publishing_components/components/select", {
  id: "dropdown2",
  label: "Option 2 preselected",
  options: [
    {
      text: "Option one",
      value: "option1"
    },
    {
      text: "Option two",
      value: "option2",
      selected: true
    },
    {
      text: "Option three",
      value: "option3"
    }
  ]
} %>

With hint (preview)

When a hint is included the aria-describedby attribute of the select is included to point to the hint. When an error and a hint are present, that attribute includes the IDs of both the hint and the error.

You might need some more information here

<%= render "govuk_publishing_components/components/select", {
  id: "dropdown2-1",
  label: "Choose your preferred thing",
  hint: "You might need some more information here",
  hint_id: "optional-hint-id",
  options: [
    {
      text: "Something",
      value: "option1"
    },
    {
      text: "Something else",
      value: "option2"
    }
  ]
} %>

With data attributes (preview)

Other data attributes can be passed to the component if needed.

<%= render "govuk_publishing_components/components/select", {
  id: "dropdown4",
  label: "With data attributes",
  options: [
    {
      text: "Option one",
      value: "option1",
      data_attributes: {
        another_attribute: "attribute 1",
        something_else: "attribute 2"
      }
    },
    {
      text: "Option two",
      value: "option2"
    },
    {
      text: "Option three",
      value: "option3"
    }
  ]
} %>

With error (preview)

If the user has to select an option, it is recommended that a radio button is used instead of a select, but this is not always possible. Note that error_id is optional, if it is not passed one will be generated automatically.

Please choose an option

<%= render "govuk_publishing_components/components/select", {
  id: "dropdown4-1",
  label: "How will you be travelling to the conference?",
  error_message: "Please choose an option",
  error_id: "error_id",
  options: [
    {
      text: "",
      value: ""
    },
    {
      text: "Public transport",
      value: "option1"
    },
    {
      text: "Will make own arrangements",
      value: "option2"
    }
  ]
} %>

With error id but no message (preview)

For some selects the error message should be rendered separately but an error state is still required (currently required in smart answers). In this scenario an error_id can be passed without an error_message to highlight the component and set aria-describedby correctly.

<%= render "govuk_publishing_components/components/select", {
  id: "dropdown4-2",
  label: "What lunch option would you like?",
  error_id: "error_id",
  options: [
    {
      text: "",
      value: ""
    },
    {
      text: "Vegetarian",
      value: "option1"
    },
    {
      text: "Meat",
      value: "option2"
    }
  ]
} %>

Full width (preview)

Make the select width 100%. This is used for facets in finder-frontend’s search.

<%= render "govuk_publishing_components/components/select", {
  id: "dropdown5",
  label: "Really wide",
  full_width: true,
  options: [
    {
      text: "Option one",
      value: "option1"
    },
    {
      text: "Option two",
      value: "option2"
    },
    {
      text: "Option three",
      value: "option3"
    }
  ]
} %>

With custom label size (preview)

Make the label different sizes. Valid options are s, m, l and xl.

<%= render "govuk_publishing_components/components/select", {
  id: "dropdown6",
  label: "Bigger!",
  heading_size: "xl",
  options: [
    {
      text: "Option one",
      value: "option1"
    },
    {
      text: "Option two",
      value: "option2"
    },
    {
      text: "Option three",
      value: "option3"
    }
  ]
} %>

With page heading (preview)

This adds a h1 element with a label element inside containing the text supplied.

<%= render "govuk_publishing_components/components/select", {
  id: "select-with-heading",
  label: "This is a page heading",
  heading_size: "xl",
  is_page_heading: true,
  options: [
    {
      text: "Option one",
      value: "option1"
    },
    {
      text: "Option two",
      value: "option2"
    }
  ]
} %>