Combobox

A powerful dropdown for providing suggestions, filtering out large datasets, and creating new values quickly and efficiently with no overhead.

Overview

Resources

Changelog

Source code

Ember

Storybook

Figma

Variations

A combobox is a combination of input and dropdown components.

The dropdown enables a user to select an option from the dataset presented inside a popup and may contain a listbox, a grid (such as a calendar), or a custom representation of the dataset. The input is used for entering a value, which can either filter out options inside a limited dataset or create a new entry in the dataset.

Single select combobox

The Single Select combobox can have a controlled or uncontrolled state. This is true for both variants (editable and filterable).

Multiselect combobox

Unlike the Single Select combobox, the Multiselect combobox must have a controlled state in order to track the options the user has selected.

Usage

Best practices

The primary action when using a dropdown is selecting an option from the list, while for the combobox it’s searching for the right option. A small dataset should use a dropdown without a filter, a medium dataset can add a search field to the dropdown to filter results (i.e. a list of campaigns), and large to infinite datasets (i.e. mail addresses) are a better fit for the comboboxes.

✅ DO

Do use in large data sets where a user is more likely to search for their option by typing than scrolling.

🚫 DON’T

Don’t use for small datasets where filtering is not needed, such as 10 items or less.

Accessibility

Keyboard support

To open the combobox on focus, press space to open the menu or start typing to search the menu
When the dropdown menu is open, use ↑ or ↓ to navigate and enter to select an item within the list
In an editable combobox, if a user is inputting a custom input, pressing enter will save that input and create it as a new item
Tab or (shift + tab to move backward) closes the combobox and moves focus