Select (dropdown)
Sample HTML for Select example
<div class="ds_question">
<label for="city-select" class="ds_label">
Choose a city
</label>
<div class="ds_select-wrapper">
<select id="city-select" class="ds_select">
<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>
<span aria-hidden="true" class="ds_select-arrow"></span>
</div>
</div>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.
Sample HTML for Select with placeholder option
<div class="ds_question">
<label for="city-select" class="ds_label">
Choose a city
</label>
<div class="ds_select-wrapper">
<select id="city-select" class="ds_select">
<option value="">Select a location</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>
<span aria-hidden="true" class="ds_select-arrow"></span>
</div>
</div>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.
Hint text is optional.
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
Sample HTML for Select with hint text
<div class="ds_question">
<label for="city-select" class="ds_label">
Choose a city
</label>
<p class="ds_hint-text" id="city-select-hint-text">This does not have to be where you live now</p>
<div class="ds_select-wrapper">
<select id="city-select" class="ds_select" aria-describedby="city-select-hint-text">
<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>
<span aria-hidden="true" class="ds_select-arrow"></span>
</div>
</div>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'.
Sample HTML for Select with error message
<div class="ds_question ds_question--error">
<label for="city-select" class="ds_label">
Choose a city
</label>
<p class="ds_hint-text" id="city-select-hint-text">This does not have to be where you live now</p>
<p class="ds_question__error-message" id="city-select-error-message">Select an option</p>
<div class="ds_select-wrapper">
<select id="city-select" class="ds_select ds_input--error" aria-describedby="city-select-hint-text city-select-error-message">
<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>
<span aria-hidden="true" class="ds_select-arrow"></span>
</div>
</div>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.
Live example
Public and bank holidays (mygov.scot)
Website analytics
Select components can be tracked through custom events and the original page path. Custom events are used as the data isn’t available at the instant an option is chosen and the clicktext could potentially contain personally identifiable information.
Tracking data attributes and events are added automatically by the Design System’s ‘tracking’ script.
Tracking and events attributes
Select elements get a data-form attribute. Its value uses the pattern select-[select ID].
Option elements inside select components get a data-form attribute. Their value uses the pattern select-[select ID]-[slug of the option's value OR slug of the option's text].
<select class="ds_select js-has-tracking-event" id="component" data-form="select-component">
<option data-form="select-component-null"></option>
<option data-form="select-component-accordion">Accordion</option>
<option data-form="select-component-breadcrumbs">Breadcrumbs</option>
<option data-form="select-component-button">Button</option>
</select>
When a user selects an option, an event is pushed to the window’s dataLayer with the selected option’s data-form attribute.
window.dataLayer.push({ 'event': 'select-component-button' });