Combobox

Introduction

The combobox is a dropdown with a typeahead behavior. It allows to select an option from the list or enter a custom value.

Combobox example

The input needs to show a placeholder text. As the combobox is often used for very long lists of items (where it makes sense to refine the list), the placeholder should also indicate the content of the dropdown list (e.g. favorites, often used, top items...).

Styling and states

The combobox uses the same styles and states as the select.

Behavior

On click the dropdown opens a list of several items for the user to choose from and the cursor is placed in the input field.

Combobox behavior on click

As soon as users start typing the list is refined. Once an item is selected, the dropdown closes and the input field is updated accordingly.

Combobox behavior type in

Combox in use

Loading behavior

If there are a lot of items in the dropdown it often needs some time to load. The loading distractor indicates this action.

Additional features

Combobox additional features

The combobox can have additional features:

  • Categories: Entries can be grouped in categories to organize the entries. The categories are separated with a line and a headline.
  • Two-rowed entries: The additional information can help the user identify entries.
  • Disabled entries: Sometimes entries are not available, in that case the entry is still shown, but it is disabled and therefore can't be selected. To give the user some information on why the entry is disabled, the reason is displayed in an overlay on hover (or tap on mobile).
Combobox features styles

Measurements

x: 12px

Category

Use a H2 headline for the category.

Second row

font-size: 12px
color: $gray-500

Line

height: 1px
color: $gray-200

Disabled

color: $gray-400