Select
<div class="govuk-form-group">
<label class="govuk-label" for="sort">
Sort by
</label>
<select class="govuk-select" id="sort" name="sort">
<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>See options and how to use with Nunjucks
{% from "govuk/components/select/macro.njk" import govukSelect %}
{{ govukSelect({
id: "sort",
name: "sort",
label: {
text: "Sort by"
},
items: [
{
value: "published",
text: "Recently published"
},
{
value: "updated",
text: "Recently updated",
selected: true
},
{
value: "views",
text: "Most views"
},
{
value: "comments",
text: "Most comments"
}
]
}) }}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.
When not to use this component
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 a Radios component.
How it works
If you use the component for settings, you can make an option pre-selected by default when users first see it.
If you use the component for questions, you should not pre-select any of the options in case it influences users’ answers.
There are 2 ways to use the select component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
<div class="govuk-form-group">
<label class="govuk-label" for="sort">
Sort by
</label>
<select class="govuk-select" id="sort" name="sort">
<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>See options and how to use with Nunjucks
{% from "govuk/components/select/macro.njk" import govukSelect %}
{{ govukSelect({
id: "sort",
name: "sort",
label: {
text: "Sort by"
},
items: [
{
value: "published",
text: "Recently published"
},
{
value: "updated",
text: "Recently updated",
selected: true
},
{
value: "views",
text: "Most views"
},
{
value: "comments",
text: "Most comments"
}
]
}) }}Select with hint
You can add hint text to help the user understand the options and choose one of them.
Keep hint text to a single short sentence, without any full stops.
Do not use links in hint text. While screen readers will read out the link text, they usually do not tell users the text is a link.
<div class="govuk-form-group">
<label class="govuk-label" for="location">
Choose location
</label>
<div id="location-hint" class="govuk-hint">
This can be different to where you went before
</div>
<select class="govuk-select" id="location" name="location" aria-describedby="location-hint">
<option value="choose" selected>Choose location</option>
<option value="eastmidlands">East Midlands</option>
<option value="eastofengland">East of England</option>
<option value="london">London</option>
<option value="northeast">North East</option>
<option value="northwest">North West</option>
<option value="southeast">South East</option>
<option value="southwest">South West</option>
<option value="westmidlands">West Midlands</option>
<option value="yorkshire">Yorkshire and the Humber</option>
</select>
</div>See options and how to use with Nunjucks
{% from "govuk/components/select/macro.njk" import govukSelect %}
{{ govukSelect({
id: "location",
name: "location",
label: {
text: "Choose location"
},
hint: {
text: "This can be different to where you went before"
},
items: [
{
value: "choose",
text: "Choose location",
selected: true
},
{
value: "eastmidlands",
text: "East Midlands"
},
{
value: "eastofengland",
text: "East of England"
},
{
value: "london",
text: "London"
},
{
value: "northeast",
text: "North East"
},
{
value: "northwest",
text: "North West"
},
{
value: "southeast",
text: "South East"
},
{
value: "southwest",
text: "South West"
},
{
value: "westmidlands",
text: "West Midlands"
},
{
value: "yorkshire",
text: "Yorkshire and the Humber"
}
]
}) }}Error messages
Display an error message if the user has not selected an option.
Style error messages as shown in the example:
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="location">
Choose location
</label>
<div id="location-hint" class="govuk-hint">
This can be different to where you went before
</div>
<p id="location-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Select a location
</p>
<select class="govuk-select govuk-select--error" id="location" name="location" aria-describedby="location-hint location-error">
<option value="choose" selected>Choose location</option>
<option value="eastmidlands">East Midlands</option>
<option value="eastofengland">East of England</option>
<option value="london">London</option>
<option value="northeast">North East</option>
<option value="northwest">North West</option>
<option value="southeast">South East</option>
<option value="southwest">South West</option>
<option value="westmidlands">West Midlands</option>
<option value="yorkshire">Yorkshire and the Humber</option>
</select>
</div>See options and how to use with Nunjucks
{% from "govuk/components/select/macro.njk" import govukSelect %}
{{ govukSelect({
id: "location",
name: "location",
label: {
text: "Choose location"
},
hint: {
text: "This can be different to where you went before"
},
errorMessage: {
text: "Select a location"
},
items: [
{
value: "choose",
text: "Choose location",
selected: true
},
{
value: "eastmidlands",
text: "East Midlands"
},
{
value: "eastofengland",
text: "East of England"
},
{
value: "london",
text: "London"
},
{
value: "northeast",
text: "North East"
},
{
value: "northwest",
text: "North West"
},
{
value: "southeast",
text: "South East"
},
{
value: "southwest",
text: "South West"
},
{
value: "westmidlands",
text: "West Midlands"
},
{
value: "yorkshire",
text: "Yorkshire and the Humber"
}
]
}) }}Avoid adding functionality to allow selecting multiple options
The select component does not support selecting multiple options, as there’s a history of poor usability and assistive technology support for <select multiple>. If you need to ask the user to pick more than one item from a list, it’s almost always better to use another method, such as a list of checkboxes.
Research on this component
User research has shown that some users struggle with selects.
Known issues and gaps
Research shows that users can struggle with selects, particularly when users have:
- been unable to close the select
- tried to type into the select
- confused focused items with selected items
- tried to pinch zoom select options on smaller devices
- not understood that they can scroll down to see more items, or how to
For more detail watch this video with examples of users struggling with selects.
This blog shows an example where a text input is used over a select for asking a user for a date.
Help improve this component
To help make sure that this page is useful, relevant and up to date, you can:
- take part in the ‘Select’ discussion on GitHub and share your research
- propose a change on GitHub – read more about how to propose changes in GitHub
Need help?
If you’ve got a question about the GOV.UK Design System, contact the team.