Dropdown

dropdown component select

Introduction

A dropdown allows a user to select a value from a set of options.

Dropdown example

Behavior

Triggering the dropdown opens a list of several items for the user to choose from. The focus is set on the first item in the list. As soon as one item is clicked, the dropdown closes and the selection is updated immediately. The dropdown box resizes to fit its new content.

Styleguide

Sizes and spacings

Styling dropdown closed

x: 12px
y: depends on the content
z: 16px

Styling dropdown open

x: 12px
y: 28px
z: 4px

Elements

Dropdown elements

Text

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700
vertical-align: center
height: 32px
border-width: 1px //inside
border-color: $gray-300
border-radius: 3px
background-color: #fff

Icon

Dropdown open icon

height: 16px
width: 16px
icon color: $turquoise-600

Item

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

Selected item

font-family: Bernina Sans Bold
font-weight: 700

Item box

max-height: 250px
border-width: 1px //inside
border-color: $gray-300
border-radius: 3px (except of edges connected to dropdown box)
width: depends on the content
min-width: width of dropdown box

Hover state

Hover on dropdown box

Dropdown box hover state

border-color: $gray-400

Hover on item

Item hover state

background-color: $turquoise-100

Disabled state

Dropdown disabled state

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

Icons in dropdowns

To differentiate between types of items in the dropdown it is possible to use icons.

Icons in dropdowns

Colors in dropdowns

The colorpicker behaves like a dropdown and allows to select from a predefined color palette, containing all chart colors.

Colors in dropdowns

x: 12px
y: 16px
z: 20px

Default state of color box

Color box normal state

border-width: 1px //inside
border-color: $gray-300
border-radius: 3px
height: 20px
width: 20px

Hover state of color box

Color box hover state

height: 24px
width: 24px

Disabled colorpicker

Colorpicker disabled state

Same as default disabled dropdown. The color box shows the default or selected color.

Grouping in a dropdown

If needed, content can be grouped within a dropdown.

There are two kinds of groups:

Groupings in a dropdown

x: 16px

Group name (not clickable)

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-500

Usage in a sentence

A dropdown can also be used within a sentence. It's possible to have several of these sentences underneath each other.

Dropdown usage in a sentence

x: 20px

Corner cases

By default a dropdown opens to the bottom-right. If there is not enough space, the direction can be adjusted.

Dropdown opening to the left

Dropdown opening to the top

Dropdown opening to the top and left