Combobox

ChoiceType Field select

Introduction

The combo box is a dropdown with a typeahead behavior. This allows the user to either type a value or select a value from the list.

Combobox example

It needs a conclusive watermark which informs the user about the options to either start typing or to select an item from the dropdown. As the combobox is often used for a very long list of items (where it makes sense to allow typing in to refine the list), the watermark should also indicate what users can find in the dropdown list (e.g. favorites, often used, top items...).

Styleguide

Sizes and distances

Combobox styleguide distances closed

Combobox styleguide distances open

x: 12px
y: 16px
z: 28px

Elements

Combobox styleguide elements

Label

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-700
margin-bottom: 8px

Text

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700

Autocomplete text

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-300

Combobox

height: 32px
width: depends on watermark
border-width: 1px //inside
border-color: $gray-300
border-radius: 3px (except of edges connected to item box)
background-color: #fff

Icon

icon: [dropdown open](/resources/icons/dropdownopen/)
height: 16px
width: 16px
icon color: $turquoise-600

Item box

max-height: 250px
border-width: 1px //inside
border-color: $gray-300
border-radius: 3px (except of edges connected to combobox)
width: same as combobox

Hover state

Hover on combobox

Combobox hover box

border-width: 1px //inside
border-color: $gray-400

Hover on item

Combobox hover item

background-color: $turquoise-100
height: 28px

Disabled state

Combobox distabled

background-color: $gray-130
border-width: 1px //inside
border-color: $gray-300
icon-color: $gray-300
text-color: $gray-300

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

Behavior

Combobox behavior on click

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 type in

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.

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.