Dropdown
The dropdown component allows users to choose an option from a long list.
Example
How to use the dropdown component
Use the dropdown component if you have more than 9 options to choose from.
Before using the dropdown component, try asking users questions which will allow you to present them with fewer options. This may involve a series of simpler questions with conditional reveals to narrow down their options.
If you think there may be a situation where none of the options apply to a user, you should include a ‘none of the above’ or ‘other’ option, rather than making the question optional. This makes sure the user doesn’t miss the question by accident.
When not to use the dropdown component
If there are less than 9 options, use the radio component or checkbox component instead.
Error messages
Error messages for this component should usually start with ‘Select’. For example, ‘Select your sector’.
Error messages should follow our standard error message styling. Make it clear which field the error message relates to, and let the user know what they need to do to fix the error.
Adding a dropdown in the CMS
At the moment, the dropdown component isn’t available to add to any other panels or components via the CMS. If you need to add a dropdown to a page or an existing form like our enquiry form, get in touch with Louise Spence.
Accessibility
We implement bespoke dropdown styling, which replaces the use of a native HTML <select> tag.
The component should be accessible by keyboard, and it should be clear which option the user is focused on. W3C have provided useful guidelines around collabsible dropdowns opens in a new window
Some users have difficulty using dropdowns. Where you can, try to use a series of radio or checkbox questions to narrow down the number of options a user can choose from.