A drop-down list component allows users to select a single option from a pre-set list.
When to use
- When you have more than two items to choose from
When not to use
- When the user can choose more than one option - consider check boxes or a multi-select list instead
- When there are only two options to choose from - use radio buttons instead
Guidelines
Do
- Use sentence case in your option text
- Keep options short and focused, and only a single line of text
- Order the items by either alphabetical order or most selected option at the top (if known)
Don’t
- Use long, complex options
- Have too many options in a drop-down. More than around 7-10 options become difficult for users to manage. Where you have many more options, consider a searchable list instead.
Component Breakdown
Label
- Communicates the context of the drop-down.
- Text of the title
- Mandatory
Helper text
- Provides the user with additional context, information or as an example to complete a field input.
- Text describing options user can select from
- Optional
Selection
- The text which identifies the current selected item.
- Default text often describes the action the user can take
- Accessibility - If none of the options are selected before the listbox receives focus, the first option receives focus. Optionally, the first option may be automatically selected. If an option is selected before the listbox receives focus, focus is set on the selected option.
- Mandatory
Value field
- The area where the user can select an item.
- Amount of selections allowed: 1+
- Display: 1 column
- Either single-select or multi-select
- Accessibility - If the drop-down supports selection of more than one option, the element with role listbox has aria-multiselectable set to true. Otherwise, aria-multiselectable is either set to false or the default value of false is implied.
- Mandatory
Disabled
- The field and its options cannot be selected
- Value can be disabled
- Users are unable to interact with a disabled item
- Conditional
Menu
- The container for links and action items.
- Mandatory
Chevron
- Indication that there are selectable options.
- Down arrow indicates direction the menu will open in
- Mandatory
Validation
- Lets the user know if there is an issue with, and what they will need to do to fix it.
- Mandatory
Mandatory
- Indicate whether or not at least one item in the checkbox(es) needs to be selected
- Conditional
Types
Drop-down list
Provides the user with a list of options to choose from. Only a single selection is permitted per list.
Multi-select drop-down
Provides the user with a list of options to choose from. More than 1 selection is permitted.
Down Open Checkbox
Drop-down list contains checkbox component. Used where multiple selections are permitted.
- If only one option is shown, then the label of the option is shown within the drop-down
- If more than one option is shown, then the number of options selected is shown within the drop-down
Select Other - Text Field
Shows a free text field when a user selects the ‘Other’ option on the drop down
Select Other - Text Area
Shows a free text area field when a user selects the ‘Other’ option on the drop-down
Select Other - Number
Shows a numeric field when a user selects the ‘Other’ option on the drop-down
Dependent Select
Links two dropdown whereby a selection in the first drop down will influence the options available in the second.
Term Select
Shows the taxonomies of a vocabulary within the CMS
States
Default
The default state of how a drop-down should look like:
Accessibility - When unchecked, state aria-checked set to false
Hover
When a mouse hovers over the checkbox, the colour changes to indicate that an action can be taken
Focus
When a keyboard user tabs through or clicks on a drop-down, there should be an additional border to show where they are on the screen.
Accessibility
- When the drop-down is focused, hitting the ‘Enter’ key will open up the menu of items to make a selection from
- When the drop-down is focused, hitting the arrow keys will allow users to navigate the options
- When the drop-down is focused and menu is open, the user can use the ‘Up arrow’ or ‘Down arrow’ keys to navigate the options
- Focus of the drop-down is moved forward when the ‘Tab’ key is used
- Focus of the checkbox is moved backwards when the ‘Shift-Tab’ key is used
Error
The 'error message' validation appears, instructing the user on how to fix the error.
Disabled
Drop-down cannot be selected by user. May be conditional based on previous selections made.
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.