Components menu
Select
Allow users to select a single option from a dropdown list.
About this component
Use the select component to let users pick a single option from a long list.
Select fields have usability and accessibility issues. It's often better to ask a user for information using an alternative component, such as radio buttons.
When to use the select component
Use select if you have a long list of options for the user to choose from.
When not to use select
Do not use select if:
- it's a short list of options — use radio buttons instead
- users need to select multiple options — use checkboxes instead
Avoid using the select component unless you need to because research shows some users find select difficult to use.
Try to reduce the length of the list by asking users questions so you can present them with fewer options. This means you can use radio buttons instead.
How to use the select component
Include a label above the select component to tell users what the dropdown list is for. For example, ‘Find local public holidays on your council’s website’ or ‘Sort by’.
Order list items alphabetically unless an alternative order would help most users.
Placeholder text
You can include placeholder text in the form field to help the user understand they need to pick an option. For example, ‘Select a location’.
To do this, use the first option in the select for the placeholder content. This option should have an empty value attribute.
Pre-selected options
You can pre-select an option for users. For example, if you’re using the select component to help users sort a search results list, you could pre-select the option to sort by ‘most relevant’.
Do not pre-select an option when it’s important that users look at all available options.
Hint text
You can add hint text to help the user understand what to do.
When using hint text:
- place it between the label and the form field
- keep it to a single short sentence, without any full stops
- do not include links
Error messages
Display an error message in red if the field is invalid. For example, if the user does not select an option when it’s a required field.
Style the error message as shown in the error message guidance.
The error message should briefly explain how to fix the error. For example, 'Select an option'.
Avoid letting users choose more than one option
Do not let users pick multiple options from the dropdown list.
The <select multiple> attribute is difficult to use, particularly for anyone using assistive technology, use checkboxes instead.
HTML
<div class="question">
<label for="city-select" class="form-label">
Choose a city
</label>
<div class="select-wrapper">
<select id="city-select" class="form-select" aria-label="Select city from the dropdown">
<option value=""></option>
<option value="aberdeen">Aberdeen</option>
<option value="dundee">Dundee</option>
<option value="dunfermline">Dunfermline</option>
<option value="edinburgh">Edinburgh</option>
<option value="glasgow">Glasgow</option>
<option value="inverness">Inverness</option>
<option value="perth">Perth</option>
<option value="st-andrews">St Andrews</option>
<option value="stirling">Stirling</option>
</select>
</div>
</div>
CSS
/* Select
------------------------------------ */
.form-control, .form-select, .form-control--floodline {
border: 2px solid var(--grey-one);
}
.form-select {
display: block;
width: 100%;
padding: .375rem 2.25rem .375rem .75rem;
-moz-padding-start: calc(0.75rem - 3px);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--grey-one);
background-color: rgb(255, 255, 255);
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z%22%2F%3E%3C%2Fsvg%3E);
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 20px 25px;
border: 2px solid var(--grey-two);
border-radius: .375rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-control:focus, .form-select:focus {
border-color: #000000;
outline: 2px solid var(--verdant-green);
outline-offset: 0;
box-shadow: 0 0 0 0.25rem rgba(64, 196, 123, .25);
}
.form-control--floodline:focus, .form-select--floodline:focus {
border-color: #000000;
outline: 2px solid var(--yellow);
outline-offset: 0;
box-shadow: 0 0 0 0.25rem rgba(253, 196, 67, .25);
}
label {
color: var(--grey-one);
}