Menu
Components
This page is In Progress and subject to frequent changes
Please contact Ken Pickering to verify any information is correct before using it.
Dropdown
In Progress
Hey, this is an old version. View the latest
Dropdowns allow users to make a single selection from a list of options. They’re widely used across our question sets.
UX Owner: Benjamin Puckering
UI Owner: Steven Roberts
Note: This component doesn't yet exist in Storybook, preliminary image(s) shown.
On this page
Example
When to use
Dropdowns can be used where:
- You’re asking the user to select only a single option from a pre-defined list
- There are more than 6 options
- Selection options are no more than a few words in length (see the section below about writing selection option text)
When not to use
Text inputs shouldn’t be used where:
- Where there are so many selection options that the list becomes impractical to scroll through, consider using a lookup instead (provided users have a good chance of being able to guess what items might be in the list).
- Where there are fewer than 6 selection options, consider using a radio button group instead
Anatomy
Dropdown layout
Dropdowns almost always span 100% of the width available.
However, the width can also be set to a specific value where the selection option text is so short that it leaves an awkwardly large amount of white space (like when we’re asking a user to pick from a list of numbers).
Dropdown list
We don’t use custom styling for the list of items displayed in our drop-down list; we allow the list to be displayed in line with the browser’s default styling and functionality.
Examples
This is largely a technical decision; it avoids the ongoing maintenance and complexity of ensuring our dropdown list displays correctly across each of the most common browsers and devices.
But it’s also good for our users too. Using a common UI component for the drop down list means our users are already familiar with how the field works.
Prompt text in the unselected state
Before a selection has been made, dropdown fields show placeholder text prompting the user to make a selection. We generally keep to the following format when writing dropdown placeholder text:
But where there’s no concise word for the last part of the syntax above, the fallback placeholder text is just Please select.
Example
Writing selection option labels
Just like radio button text labels, selection options in the dropdown list should be concise and clearly differentiated from the other options in the list.
However, there’s an extra important consideration when writing dropdown selection option labels: length. That’s because many mobile devices cut off (or ‘ellipsize’) long dropdown label lengths.
Always sense-check your selection options to make sure none are more than 3 or 4 words in length. Any longer than that, and users might end up answering questions based on what they assume comes after the dots.
Example
Selection states
Unselected
Where the user hasn’t yet made a selection from the dropdown list.
Selected
Where the user has made a selection from the dropdown list.
Interaction states
For general information and guidance about these states, see [interaction states](../).
Hover
There is no hover style for dropdowns. The cursor changes to the link pointer, which provides sufficient indication that the field is interactive.
Focus
When focus is applied to a dropdown an offset border is applied.
Note: The focus state is also applied where the component is both in focus and on hover at the same time.
Disabled
When disabled, the dropdown field can’t be interacted with and there are no hover or focus interactions. Both ‘placeholder’ and ‘selected’ radio buttons can be disabled.
To visually indicate the disabled state, the opacity of the component is reduced.
Validation states
Error
Dropdown fields most commonly error when the user hasn’t made a selection from the dropdown list.
In rare circumstances, it is possible for dropdown fields to error even where the user has made a selection, typically where there’s some form of cross-field logic that means the selected drop-down option isn’t valid.
In these circumstances, the same validation styling as above is applied.
Similar components
There are a range of components that resemble the drop-down, either visually or in their functionality.
Where to find this component
Documentation version history
Last updated Wednesday, 30th June 2021 13:22 by Gemma D.