Components

Select

Sort by

HTML
React

<div id="sort" class="govuk-form-group">
  <label
    for="sort-input"
    class="govuk-label"
    aria-hidden="false"
  >
    Sort by
  </label>
  <select
    name="sort"
    class="govuk-select"
    id="sort-input"
  >
    <option value="published">
      Recently published
    </option>
    <option value="updated" selected="">
      Recently updated
    </option>
    <option value="views">Most views</option>
    <option value="comments">Most comments</option>
  </select>
</div>

<Select
  label="Sort by"
  name="sort"
  options={[
    {
      label: "Recently published",
      value: "published",
    },
    {
      label: "Recently updated",
      selected: true,
      value: "updated",
    },
    {
      label: "Most views",
      value: "views",
    },
    {
      label: "Most comments",
      value: "comments",
    },
  ]}
/>

Props

Name	Type	Default	Description
id	string	-	'id' attribute to place on the base HTML element HTML id (If not specified then the name will be used)
classBlock	string	-	Block name override in BEM style classes applied to all elements
classModifiers	Modifiers	[]	BEM style modifiers to apply to the base HTML element
className	string	-	Extra classes to apply to the base HTML element
error	string	-	Error message
hint	string	-	Hint
label	ReactNode	-	REQUIRED. Label
options	Option[]	-	REQUIRED. List of options to select from
width	number	-	Width of the field in characters (approximate)

When to use this component

The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.

How it works

The select component allows users to choose an option from a long list. Before using the select component, try asking users questions which will allow you to present them with fewer options.

Asking questions means you’re less likely to need to use the select component, and can consider using a different solution, such as radios.

Sort by

HTML
React

<div id="sort" class="govuk-form-group">
  <label
    for="sort-input"
    class="govuk-label"
    aria-hidden="false"
  >
    Sort by
  </label>
  <select
    name="sort"
    class="govuk-select"
    id="sort-input"
  >
    <option value="published">
      Recently published
    </option>
    <option value="updated" selected="">
      Recently updated
    </option>
    <option value="views">Most views</option>
    <option value="comments">Most comments</option>
  </select>
</div>

<Select
  label="Sort by"
  name="sort"
  options={[
    {
      label: "Recently published",
      value: "published",
    },
    {
      label: "Recently updated",
      selected: true,
      value: "updated",
    },
    {
      label: "Most views",
      value: "views",
    },
    {
      label: "Most comments",
      value: "comments",
    },
  ]}
/>