The multi combobox component enables users to select options from a predefined list or enter a custom text.

It provides an editable input field to filter the list and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multiple selection.

Multi combobox

Do

Use the multi combobox:

• To select one or more options from a long list of options (no more than ~200).
• If the values in the option list contain secondary information that doesn’t need to be displayed right away.

Don't

Don’t use the multi combobox:

• To select multiple ranges.
• To select or search multiple business objects.
• To select an item from a short list of items.
• If you want to let users add custom values. Consider using the multi input instead.
• If the list contains more than ~200 items.

1. Text: Placeholder or typed text

2. Input field: Area for displaying tokens and typing text.

3. Arrow button: Opens a dropdown list with the values that can be added as tokens.

4. Tokens: Show individual selected values.

5. Overflow button: Show all selected values.

   1. n More: Appears after the last visible token. The count n indicates how many other values are selected.
   2. n Items: Appears if no tokens fit into the input field. The count n indicates how many values are selected overall.

Anatomy of a multi combobox

Grouped Items

Multi combobox with grouped items

Predefined Options Only

Multi combobox with predefined options only

The user can only write text that matches a predefined value in the list. The text must start with the first letter of a value. If the user types something that doesn’t match one of the options, the multi combobox switches to an error state.

With Free Text Input

Multi combobox with free text input

The user also has the option of entering a freestyle text. If the text doesn’t match one of the available options, no token is created and the text is displayed directly in the input field.

To select values, users can:

• Click the dropdown arrow and select the relevant options from the list.
• Start to type a value and then select the proposed option.

The selected options then appear as tokens in the input field. If there isn’t enough space to display all the tokens, an overflow button appears (n More, or n Items).

Empty multi combobox

To view the selected options, users can:

• Click the arrow button to display the full selection list (both selected and non-selected items).
• Click the overflow button n More or n Items (if shown) to view all the selected items.

To remove an item from the selection, users can

• Click the “X” icon in the token.
• Focus on the token to select it and use the keyboard delete key to remove the token.

Multi combobox with multiple tokens

The multi combobox supports left-to-right (LTR) and right-to-left (RTL) reading directions.

Multi combobox with left-to-right and right-to-left reading directions