combobox

Overview

Combobox inputs allows users to select one or more options from a dropdown list. It provides a quick and efficient way for users to choose from a predefined set of options.

Basic Usage

Comboboxes come in XS, S, and Default sizing.

How to use this component

Choosing Sizing

When selecting Combobox sizing, make sure to select the size that aligns with the same sizing of your other inputs when putting inputs side by side.

When surfacing error messages, let the user know preemptively what the selection parameters are. If an option is not selectable, these options should be disabled and designers should provide a clear reason for why it is unavailable to further prevent errors. For additional information on inline messaging, visit our guidelines on form validation and error handling.

Using Combobox vs. Select

The primary difference between Select Input and Single-Select Combobox is that Combobox allows users to search and benefit from typeahead functionality.

Use a Select input when:

there are a limited number of options available and the options are well-defined and clearly distinct from each other
the list of options is relatively short
the user doesn't need to filter or search the options

Use a Combobox input when:

there are a larger number of options available
the user needs to filter or search the options to find the desired one
the options may have similar names or spellings, and the user needs to search for them based on partial input or keywords

Using Combobox vs. Search

The primary difference between Search Input and Single-Select Combobox is that Search Input is used for navigation and filtering, not making a selection.

Use a Search input when:

navigating and filtering results in real-time on a page
the search input routes the user to the appropriate page they select from the dropdown

Use a Combobox input when:

the user selects one or more options from a finite list
you need to display the options that the user has selected
the user can add or create a new option that is not found in the list

Grouped Chip

When multiple options are selected in the same category group, they will be combined in a grouped chip with a nested badge that displays the user’s selection.

Input Overflow

When multiple options are selected from a Combobox, the input height should expand to a max of 3 rows and an overflow shadow should be added as an affordance to indicate to users there is a scroll.

Overview

Combobox inputs allows users to select one or more options from a dropdown list. It provides a quick and efficient way for users to choose from a predefined set of options.

Anatomy

Basic Usage

Comboboxes come in XS, S, and Default sizing.

How to use this component

Choosing Sizing

When selecting Combobox sizing, make sure to select the size that aligns with the same sizing of your other inputs when putting inputs side by side.

Error States

Using Combobox vs. Select

The primary difference between Select Input and Single-Select Combobox is that Combobox allows users to search and benefit from typeahead functionality.

Use a Select input when:

there are a limited number of options available and the options are well-defined and clearly distinct from each other
the list of options is relatively short
the user doesn't need to filter or search the options

Use a Combobox input when:

there are a larger number of options available
the user needs to filter or search the options to find the desired one
the options may have similar names or spellings, and the user needs to search for them based on partial input or keywords

Using Combobox vs. Search

The primary difference between Search Input and Single-Select Combobox is that Search Input is used for navigation and filtering, not making a selection.

Use a Search input when:

navigating and filtering results in real-time on a page
the search input routes the user to the appropriate page they select from the dropdown

Use a Combobox input when:

the user selects one or more options from a finite list
you need to display the options that the user has selected
the user can add or create a new option that is not found in the list

Grouped Chip

When multiple options are selected in the same category group, they will be combined in a grouped chip with a nested badge that displays the user’s selection.

Input Overflow

When multiple options are selected from a Combobox, the input height should expand to a max of 3 rows and an overflow shadow should be added as an affordance to indicate to users there is a scroll.