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 has a separator between the input field and the drop-down arrow, as shown below:

Usage & Behavior

General guidelines

Structure

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)

Default state

The combo box will show the default option, if exists.

If there is no default option:

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.

General logic:

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 of an option, the options list will close. The selected or entered option will be shown in the trigger area.

States

State	Input Field	Drop-down Arrow
Regular
Hover
Active
Disabled
Error
Warning
Focused
Focused, Hover
Focused, Active
Focused, Disabled

Interaction

Interaction	Details
Click the drop-down arrow	The options list is opened. The text field is focused so that the user may start typing. The user may use the Up and Down keys to navigate between options and Enter to select. A blue check mark should be shown to the left of the selected option, where one exists.
Click the text field	The text field is focused and user can type. The options list remains closed until characters are entered.
Enter characters in the text field	As characters are entered, the list is filtered to show matching results only. The filter can match anywhere within the value string (at the beginning, middle, or end).
Select an option	On selecting an option: the options list closes. the selected option is displayed in the field.
Click anywhere outside of the combo box	Closes the options list.
Click Escape key	Closes the options list.

Validation & Errors

Please refer to the Field Validation page for more information.

A combo box with a warning:

A combo box with an error:

Best Practices

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, up to a maximum width. Where values are too long they should be truncated with a tooltip displaying the full text on hover.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

In the focus state, typing will initiate filtering.

Keyboard	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.

Mouse	Text field	Drop-down trigger
Right click	Set Focus state on field	Set Regular state on component

Design

Zeplin Link	Thumbnail
https://zpl.io/amp1y3V

Combo Box