Form elements - Select

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

Open this select example 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.

Help improve this page

The manual is a community effort. Anyone can help improve and grow it.

To help make sure the Select guidance is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the NHS digital service manual or want to feedback, get in touch.

Updated: January 2019