Combobox

How to use a combobox

A combobox allows users to filter or search for options in a list by typing into a text field. Use a combobox when the list of options is complex enough to require searching, filtering and custom input functionality.

When using a combobox:

• Keep the options as short as possible as long option descriptions can cause the text to get truncated
• Use clear and concise labels that describe the purpose or function of the combobox
• Use a popover dropdown if the user if unfamiliar with the content in the combobox or the data is complex

Don't use a combobox if the list contains only a few options.

Types of combobox

Multi select

The text input feature of the combobox allows users to enter a custom value that serves as a filter and helps them select an option from a long list in a dropdown.

Multi select with button

This option allows for a icon or text button to be inserted at the end of the combobox.

Multi select with selections

As the user can select multiple items from the dropdown list, the selections become represented as dismissible tags within the search field filter.

Single select

The single select option simply allows the user to select one item only from the dropdown list.

Options available

Label

The label of the combobox provides a clear and concise description of the component's purpose, making it easier for users to interact with the interface and understand it. Always display a label unless the combobox is next to another component that has a label.

Supporting text

The description in the help text is flexible and encompasses a range of guidance. Sometimes this guidance is about what to input, and sometime it’s about how to input.

Content guidelines

Try to limit each item in the list to one or two words.

Was this page helpful?