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:

Open

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 have a preceding label (optional). Labels inform the user about what is included in the options list.

Open

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

• The width of the options list should adapt to the longest option, up to a maximum width. Where options are too long they should be truncated with a tooltip displaying the full text shown on hover.

Internal Logic

Users need to either:

• select one option exclusively from a short list, or

• enter a custom value manually.

General logic:

• On selection of an option, the options list will close. The selected or entered option will be shown in the trigger area.

States

Interaction

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

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.

Accessibility compliance

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

Focus management

In the focus state, typing will initiate filtering.

Design

Code