Select
The select component should only be used as a last resort in public-facing services.
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 radios.
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 are using Nunjucks, you can use the Nunjucks macro.
Get the Nunjucks macro for this example from the Camden Frontend library
Select with hint
You can add hint text to help the user understand the options and choose one of them.
Get the Nunjucks macro for this example from the Camden Frontend library
Error messages
Display an error message if the user has not selected an option.
Style error messages as shown in the example:
Get the Nunjucks macro for this example from the Camden Frontend library
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
This component is based on the select component from the GOV.UK Design System.
You can take part in the ‘Select' discussion on GOV.UK’s Design System’s GitHub and share your research.