Skip to main content

Select

Use select to let users choose an option from a long list but only use it as a last resort.

Code and design

Open in new window
Copy
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="select-1">
    Label text goes here
  </label>
  <select class="nhsuk-select" id="select-1" name="select-1">
    <option value="1">NHS.UK frontend option 1</option>
    <option value="2" selected>NHS.UK frontend option 2</option>
    <option value="3" disabled>NHS.UK frontend option 3</option>
  </select>
</div>
Copy
{% from 'select/macro.njk' import select %}

{{ select({
  "id": "select-1",
  "name": "select-1",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "NHS.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "NHS.UK frontend option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "NHS.UK frontend option 3",
      "disabled": true
    }
  ]
}) }}

How to use select

The select component allows users to choose an option from a long list. Before using it, try other questions which will allow you to present users with fewer options. Consider using a different solution, such as radios.

Research

Watch a video about how some users struggle with selects: Alice Barlett: Burn your select tags.

Discuss

Discuss select on GitHub

Get in touch

If you have a question:

Updated: January 2019