The combo box is dropdown with a typeahead behavior. This allows the user to either type a value or select a value from the list.
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...).
Sizes and distances
x: 12px y: 16px z: 28px
font-family: Bernina Sans Regular font-size: 12px color: $gray-700 margin-bottom: 8px
font-family: Bernina Sans Regular font-size: 14px color: $gray-700
font-family: Bernina Sans Regular font-size: 14px color: $gray-300
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
height: 16px width: 16px icon color: $turquoise-600
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 on combobox
border-width: 1px //inside border-color: $gray-400
Hover on item
background-color: $turquoise-100 height: 28px
background-color: $gray-130 border-width: 1px //inside border-color: $gray-300 icon-color: $gray-300 text-color: $gray-300
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.
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.
If there are a lot of items in the dropdown it often needs some time to load. The loading distractor indicates this action.