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:
- share research or feedback about the Select component on GitHub
- propose a code change to this page on GitHub
Need help?
If you’ve got a question about the NHS digital service manual or want to feedback, get in touch.
Updated: January 2019