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>
{% from "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.
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.
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>
{% from "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"
}
]
}) }}
Research on this component
Watch a video about how some users struggle with selects.
Help improve this page
To help make sure the Select page is useful, relevant and up to date, you can:
- share research or feedback about the Select component on GitHub
- propose a change to this page - read more about how to propose changes in GitHub
Need help?
If you’ve got a question about the GOV.UK Design System you can contact the team: