Combobox

Usage

Combobox is an autocomplete input that allows users to filter and select one or more values from a list of options.

Best practices

Use labels to describe what the data in the combobox is all about.

Don't

Do not omit the label, or use a placeholder as a label. The label should be always visible to the user.

Use combobox for single selection in forms where the list of options is long and filtering options benefits the user.

Don't

Avoid using it for short and simple lists of options that do not require filtering. Use the Select instead.

Use combobox for multi-selection in forms.

Don't

Don’t use combobox for actions and filtering purposes e.g. table filters. Use the Popover instead.

Anatomy

Single-select

Leading and trailing icons are placed at the start or end of the dropdown item and, as the icons that are placed in buttons, they should be used consciously.

Trigger

Text input that opens the combobox popout when clicked, displaying the available options.

Option

Item that can be selected by the user. Selection is indicated by check icon placed on the left. Option can be extended with complementary content.

Multi-select

Leading and trailing icons are placed at the start or end of the dropdown item and, as the icons that are placed in buttons, they should be used consciously.

Trigger

Text input that opens the combobox popout when clicked, displaying the available options. The trigger includes a badge that shows the total number of selected options.

Item that can be selected by the user. Unlike a single-selection combobox, options in this case include a checkbox instead of an icon. This helps users clearly understand that they can select multiple items.

Grouping

Combobox support section dividers and headers for grouping options and adding clarity.

Combobox Options

Options can include a prefix icon and description, in addition to the label. These provide users with extra information to help them choose the right option.