| Table of Contents |
|---|
Description
A combo box is a combination of a Drop-down Menu and Text Field.
With this component the user can either select a predefined option from a list or enter a new one manually using an editable input field.
...
The combo box consists of:
Text Field. Shows the currently-selected option or default text. Users can enter any character to create a new option or filter the predefined list.
Drop-down arrow. This trigger area opens and closes the options list.
Options list. Displays the list of predefined values. Options should have short labels, because the list uses single lines only.
Selection indicator. A blue check mark should be shown to the left of the selected option.
Preceding label (optional, see below)
...
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 combo box can (optionally) have a preceding label. Labels inform the user about what is included in the options list.
...
When the preceding label is not used, the default option should demonstrate the content of the list as much as possible.
Options can be ordered logically, alphabetically, numerically, or chronologically. Refer to the Drop-down Menu page for details.
Internal Logic
Users need to either:
select one option exclusively from a short list, or
enter a custom value manually.
...
Interaction | Details |
Click the drop-down arrow |
|
Click the text field |
|
Enter characters in the text field |
|
Select an option | On selecting an option:
|
Click anywhere outside of the combo box |
|
Click Escape key |
|
Validation & Errors
Please refer to the Field Validation page for more information.
A combo box with a warning:
...
Do not allow the control’s width to auto-adjust based on the selection.
Keep the option labels as short as possible because the list uses single lines only.
There is no horizontal scrolling in the option list.
The options list should adapt its width to the longest entry by default, but values which are too long may be truncated, with a tooltip displaying the full text (not recommended).
Accessibility compliance
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.
Focus management
In the focus state, typing will initiate filtering.
Text field | Drop-down trigger | |
 |  | |
Tab | Moves the focus to the drop-down trigger. | Navigates to the next component. |
Shift + Tab | Navigates to the previous component. | Moves the focus to the text field. |
Space | Acts as a space in a Text Field. | Opens the menu. |
Enter | Applies the typed text in the Text Field. | Opens the menu. |
Esc | N/A | N/A |
Arrows | Act as arrows within a Text Field. | Up/Down - Opens the menu. |
Design
Zeplin Link | Thumbnail |
 |
...