The combobox allows users to select an item from a predefined list.

It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.

If the entries are not validated by the application, users can also enter a custom value.

Combobox

Do

Use the combobox:

• If users need to select a single item from a long list of items.
• If the list items are secondary information and do not need to be displayed right away.

Don't

Don’t use the combobox:

• If there are only two options to choose from. Use a switch instead.
• If users need to select an item from a short list of items. Use the select component instead.
• If there are more than 200 list items. Instead, consider using an input field with a select or value help dialog.

1. Input field: Displays the selected value.
2. Value/text: The content the user has entered into the field.
3. Dropdown button: Expands and collapses the option list.
4. Option list: Contains values from which the user can choose.

Anatomy of a combobox

Use the two-column layout if you need to display additional information for each option.

You can group items in the option list.

Two-column layout

Grouped items

Starts with per term (default): Filters for items where the beginning of any word in in the label matches the query entered.

Starts with: Filters only for items where the beginning of the label matches the query entered.

Contains: Searches the full label for a match.

‘Starts with per term’ filter variant

‘Starts with’ filter variant

‘Contains’ filter variant

Choose from List

1. Clicking the dropdown button opens the suggestion list.
2. Selecting an item from the list enters it in the input field.

Type or Paste Text

1. The component responds as the user types or pastes in text:

   • • Suggestions are filtered based on the typed text (see Filter Variants).
     • The autocomplete feature proposes matching labels. The autocompleted part of the text is highlighted.

2. To enter a value in the input field, the user can:

   • • Press Enter to accept the autocompleted text.
     • Click an item in the suggestion list.

Combobox - choose from list

• If the user pastes or types a text that doesn’t match one of the selection options, it remains in place by default.
• If data validation is implemented, entering an incorrect text triggers an error message and the field displays in an error state.

Data validation – error state for incorrect value