Description
ONGOING
A drop-down menu consists of related content grouped together and organized vertically.
It allows users to select one or multiple values from a list of predefined values. An optional search field can help the user to find values easily.
Types
Type | Usage | Image |
---|---|---|
Regular drop-down | When the user can only select one option from a predefined list. When there are fewer than 15 options. | |
When there are more than 15 options. When users are expected to know what they are looking for, and are likely to be aware of how the option is labelled. | ||
When the user can select multiple values from a predefined list | ||
Usage & Behavior
General guidelines
Structure
The drop-down consists of:
Trigger area. Selecting the drop-down trigger should open or close the options list. Includes:
text area, with currently-selected option or default text.
a drop-down arrow.
Options list. Displays the list of available values. Each option:
must have a short text label
can also have an associated icon
(Optional) Action icons. These can add extra functionality for each option when hovered. They should display a tooltip describing the action on hover.
Selection indicator. In the options list, a blue check mark should be shown to the left of the selected option.
Text labels | |
Icons and text labels | |
Action icons Selection indicator |
Default State
The drop-down consists of a text box showing a default value, if one exists. For example:
If not:
Where a preceding label is being used, the default text will be Select.
Where there is no label, the default text will be Select a {NameOfEntity}. For example, Select a queue.
Content
A drop-down menu can (optionally) have a preceding label. Labels inform the user about what is included in the options list.
Order the options using one of these rules:
Logical. Sort options into a meaningful order. For example, group related options together, and order by the most common to least common.
Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.
Numeric. Sort numeric values in a sequential order, with the lowest number first.
Chronological. Sort time-related information into chronological order, with the most recent first.
Internal Logic
Users need to select one option exclusively from a short list.
There should be a minimum of 3 options.
The user may select an item either by using the mouse and clicking, or by using the Up and Down keys to navigate between options and Enter to select.
On selection, the options list will close.
The selected item will be presented in the trigger area.
States
State | Visual | Visual- searchable | Visual- multi select | Visual- multi select searchable |
---|---|---|---|---|
Regular | ||||
Hover | ||||
Active | ||||
Selected | ||||
Disabled | ||||
Error | ||||
Warning | ||||
Focused, Regular | ||||
Focused, Hover | ||||
Focused, Active | ||||
Focused, Disabled |
Interaction
Description | Visual | |
---|---|---|
Regular state | The Select field always displays either
See the Default State section above. | |
Hover | ||
Click a closed drop-down |
| |
Select an item | On selecting an option:
| |
Click a drop-down with an existing selection |
|
Searchable drop-down
A Search field should be added to options lists with over 15 items, and when users are likely to know what they are looking for.
Internal Logic
The search field will be auto-focused when the options list opens, so that the user may start searching immediately.
The search field will operate as a Live Search.
The user may select an item either by using the mouse and clicking, or by using the Up and Down keys to navigate between options and Enter to select.
On selection, the options list will close.
The selected item will be presented in the trigger area.
Interaction
Description | Visual | |
---|---|---|
Click a closed drop-down |
| |
Enter search |
| |
Select an item | On selecting an option:
| |
Click a drop-down with an existing selection |
|
Multi Select drop-down
A multi selection drop-down allows users to easily select multiple values from a predefined list.
Internal Logic
Selected items
The selected items are presented in the trigger area as read-only.
2 or more items are presented one after the other, separated by a comma.
When the selected items exceed the size of the trigger area, the labels will be replaced by the total number of selections.
When space is a constraint and/or the user is expected to select many items, a Select All option can be added:
Select All (optional)
All is a master type checkbox, which controls the state of all the other checkboxes in the list. See Check Box for the full behaviour).
All should be presented at the top of the options list.
When all items are selected, the trigger area should show All instead of a number.
Use the All option when:
The user is expected to select all or most of the items.
The list is very long (so it will allow the user to easily clear all selections).
Interaction
Step | Visual | Description |
---|---|---|
Click a closed drop-down |
| |
Select an item |
| |
Multiple items selected |
| |
Click on the trigger area, or |
|
Multi-select Searchable drop-down
Interaction
Step | Visual | Description |
---|---|---|
Click a closed drop-down |
| |
Enter Search |
| |
Select an item |
| |
Delete search string |
|
Validations and errors
Please refer to Field validation page for more information.
An example for a drop-down menu with a warning:
An example for a drop-down menu with an error:
Best practices
Use when:
The options list is small-medium in size.
Space is constrained.
Use the searchable type when:
there are more than 15 options.
when users are expected to know what they are looking for, and are likely to be aware of how the option is labelled.
Don’t use when:
The list has fewer than 3 options.
The list has fewer than 7 options and the user needs to see them all at once. Use radio buttons or Check boxes instead.
The user needs to enter a value which is not in the list. Use a combo box instead.
The list is large. Use Dual List Selector or List instead.
General:
Only show a scrollbar when the list has over 8 items.
Keep the text values as short as possible, because the list uses single lines only.
The option list should adapt its length to the longest entry by default, but values that are too long may be truncated, with a tooltip displaying the full text (not recommended). The option list may not have a horizontal scroll.
Place options that represent All or None at the beginning of the list, regardless of the sort order of the remaining items.
Do not allow the control to auto-adjust based on the selection.
If there’s no label, or if the label is not indicative enough, the selected item type should be added within the drop-down, after the number of selections:
Accessibility Compliance
For searchable drop-down In Focus state:
Typing will initiate the search
Clicking the down arrow key will open the menu
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Design
Zeplin Link | Screen Thumbnail |
---|---|
Code
<<a box containing the code - discuss with Femi>>