Combobox

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

Known issues

Show details

Anatomy

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

Popout: Container that holds available options.

Group: (Optional) A semantic and visual grouping of options that belong together. Group can include the title.

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.

Select indicator: (Optional) Informs which option is currently selected. Icon for sing-selection type, checkbox for multi-selection type.

Usage Guidelines

When to use this component

Long Lists: Use a combobox for single-selection forms when the list of options is long and a search function would help users find what they need quickly.

Multiple Selections: This component is ideal for forms where users need to select multiple items from a list.

Rich Content: Use a combobox when the selection requires more than just simple text, such as icons or other rich content.

When not to use this component

Filtering: Don't use a combobox for filtering data or views. Use a dedicated Filter component instead.

Immediate Actions: Avoid using it for selections that cause an immediate change in the view, like updating a status within a table. A Dropdown Menu is better suited for these actions.

Short Lists: For short, simple lists of options that don't need a search function, use a Select component.

Best Practices

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

Don't

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

Group related elements to improve ease of scanning of the options.

Don't

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

Use supplementary content if it helps users make a decision.

Don't

Do not use supplementary content for decorative purposes.

Use icons consistently for all options to ensure proper layout and easy scanning.

General Component Behaviors

Grouping

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

Multi-selection counter

When the user selects multiple options, the search icon in the input is replaced with a tag displaying the number of currently selected options and a button to clear the selection.

Triggering the menu

Combobox supports two ways to trigger the menu. By default, the menu opens immediately when the user clicks on the input.

Alternatively, it can be triggered when the user starts typing. This latter option is particularly useful when options are not available instantly and depend on user input.

Responsive Behavior

The combobox uses a bottom sheet on mobile and displays an overlay on top of the content. All interactive elements visually adapt their tap targets, and items include a bottom divider to clearly indicate separation between them.