Elements
Select dropdowns
Select dropdowns let people choose an option from a list.
Guidelines
Long lists of options can be hard for some people to use. Consider whether people may be able to answer the question more easily if you:
- reword the question so that it has fewer options, and then use radio buttons
- use an input for example, for data which is very familiar to people like their date of birth
Go to the guidelines on:
We’ve used our foundations to design select dropdowns. For consistency across Co-op products and services, do not change the styling of select dropdowns.
Label
Select dropdowns must have a label that tells people what information to enter. Space form fields evenly and close to their associated label.
The label should:
- be short
- make it clear what information you’re asking for
- be above the field
Hint text
You can add optional hint text to help people understand the information they need to enter.
Error messages
Give error messages after the user submits the form.
Error messages should appear above the relevant select dropdown. This means they are read out by assistive technology in an order that makes sense.
Go to the guidelines on form validation.
Focus ring
The focus ring appears as a purple outline around any object, including select dropdowns, when someone selects it.
Do not remove the focus ring. Some people who use assistive technology need it to navigate our products and services.
Examples
Select dropdown.
Select dropdown with hint text.
Select dropdown with error message.
Select dropdown with hint text and error message.
Changelog for this page
Date | Notes |
---|---|
4 June 2021 | First version of page published |