Select
When to use this component
The select component should only be used as a last resort in public-facing services.
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 radios.
If you have a very long list of options (for example, a list of countries or organisations), consider using an accessible autocomplete (opens in a new tab) instead, which allows users to filter options by typing.
How it works
Read the GOV.UK Design System guidance on selects (opens in a new tab) for information on pre-selecting options and accessibility considerations.
HTML examples
Copy the HTML into your web template. Replace schema-name with your CRM field schema name, keeping any suffixes like -hint. This is required for the CRM helper framework to validate and submit data.
Use the input field above each example to enter your schema name. This updates all instances in the code automatically, ensuring no mistakes that could impact validation or accessibility.
For single question pages
If presenting only one question on the page, set the contents of the <label> as the page heading.
This is good practice as it means that users of screen readers will only hear the contents once.
You will need to include an empty {% title %} block in your web template to remove the default page header.
Select for single question page
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
Choose location
</label>
</h1>
<select class="govuk-select" id="schema-name" name="schema-name">
<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>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
Choose location
</label>
</h1>
<select class="govuk-select" id="schema-name" name="schema-name">
<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>
{% endblock %}For multiple question pages
If presenting more than one question on the page, do not set the contents of the <label> as the page heading.
Select for multiple question page
<div class="govuk-form-group">
<label class="govuk-label" for="schema-name">
Choose location
</label>
<select class="govuk-select" id="schema-name" name="schema-name">
<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>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<div class="govuk-form-group">
<label class="govuk-label" for="schema-name">
Choose location
</label>
<select class="govuk-select" id="schema-name" name="schema-name">
<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>
{% endblock %}Using hint text
Use hint text for help that's relevant to the majority of users, like how their information will be used, or where to find it.
Do not use long paragraphs and lists in hint text. Screen readers read out the entire text when users interact with the form element. Do not include links within hint text.
Select with hint text
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
Sort by
</label>
</h1>
<div id="schema-name-hint" class="govuk-hint">
Choose a single option to sort by
</div>
<select class="govuk-select" id="schema-name" name="schema-name">
<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>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
Sort by
</label>
</h1>
<div id="schema-name-hint" class="govuk-hint">
Choose a single option to sort by
</div>
<select class="govuk-select" id="schema-name" name="schema-name">
<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>
{% endblock %}Error messages
An error message is displayed next to the field and in the error summary when a validation error occurs. The CRM helper framework automatically handles error messages for specific error states.
If nothing is chosen and the question is required
'Choose [whatever it is]'. For example, 'Choose location'.
If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.