Skip to main contentCarbon Design System

Dropdown

Color

ElementPropertyColor token
Labeltext-color$text-secondary
Field texttext-color$text-primary
Field text: prompttext-color$text-helper
Helper texttext-color$text-helper
Fieldbackground-color$field
border-bottom$border-strong
Chevron iconsvg$icon-primary
Menu optiontext-color$text-secondary
background-color$layer
border-top$border-subtle
Menubox-shadow0 2px 6px 0 rgba(0,0,0,.2)
Checkbox iconbackground-color$icon-primary
check$icon-inverse
border$icon-primary
Dropdown variant examples

Dropdown variant examples: default, inline, multiselect, combo box.

Interactive states

StateElementPropertyColor token
FocusFieldborder$focus
HoverFieldbackground-color$field-hover
Menu optionbackground-color$layer-hover
Menu optiontext-color$text-primary
InvalidError iconsvg$support-error
Fieldborder$support-error
Error messagetext-color$text-error
WarningWarning messagetext-color$text-primary
Warning iconsvg$support-warning
ActiveMenu optionbackground-color$layer-active
SelectedMenu optionbackground-color$layer-selected
Menu optioncheckmark$icon-primary
Multi-selectedTagbackground-color$background-inverse
Tagtext-color$text-inverse
DisabledFieldbackground-color$field-disabled
Fieldtext-color$text-disabled
Labeltext-color$text-disabled
Chevron iconsvg$icon-disabled
Dropdown and combo-box states

Dropdown and combo box states

Multi-select dropdown states

Multiselect dropdown states

Inline dropdown

StateElementPropertyColor token
EnabledFieldbackground-colortransparent
Field texttext-color$text-primary
Chevron iconsvg$icon-primary
Menu optiontext-color$text-secondary
Menu optionbackground-color$layer
HoverFieldbackground-color$field-hover
Menu optionbackground-color$layer-hover
Menu optiontext-color$text-primary
ActiveMenu optionbackground-color$layer-active
SelectedMenu optionbackground-color$layer-selected
Menu optioncheckmark$icon-primary
InvalidFieldborder$support-error
Error messagetext-color$text-error
Error iconsvg$support-error
Inline dropdown states

Inline dropdown states

Typography

All dropdown text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Dropdown options should not exceed three words.

ElementFont-sizeFont-weightType token
Label12 / 0.75Regular / 400$label-01
Field text14 / 0.875Regular / 400$body-short-01
Menu option text14 / 0.875Regular / 400$body-short-01
Error message12 / 0.75Regular / 400$label-01
Helper text12 / 0.75Regular / 400$helper-text-01

Structure

Dropdowns have two states, open and closed. An open and closed dropdown should be the same width and appropriately fit the design, layout, and content. The height of a closed dropdown stays consistent while the height of an open dropdown will vary based on the amount of options it has. Please note the various color differences for closed and open dropdowns.

ElementPropertypx / remSpacing token
Labelmargin-bottom8 / 0.5$spacing-03
Fieldpadding-left16 / 1$spacing-05
padding-right48 / 3$spacing-09
border-bottom1px–
Chevron iconpadding-right, padding-left16 / 1$spacing-05
Helper textmargin-top4 / 0.25$spacing-02
State iconpadding-right, padding-left16 / 1$spacing-05
Structure and spacing for a closed dropdown

Structure and spacing measurements for dropdown | px / rem

Sizes

The field height and menu option height should always match. These sizes options can be applied to all variants of dropdown.

ElementSizeHeight px / rem
FieldSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Menu optionSmall (sm)32 / 2
Medium (sm)40 / 2.5
Large (lg)48 / 3
Dropdown sizes

Dropdown sizes | px / rem

Combo box

ElementPropertypx / remSpacing token
Labelmargin-bottom8 / 0.5$spacing-03
Fieldpadding-left16 / 1$spacing-05
padding-right72 / 4.5–
Chevron iconpadding-right16 / 1$spacing-05
Clear iconpadding-right8 / 0.5$spacing-03
Spacing for combo box dropdown

Spacing for combo box dropdown | px / rem

Multiselect dropdown

ElementPropertypx / remSpacing token
Labelmargin-bottom8 / 0.5$spacing-03
Fieldpadding-left16 / 1$spacing-05
padding-right48 / 3$spacing-09
Chevron iconpadding-left, padding-right16 / 1$spacing-05
Tagheight24 / 1.5–
padding-right8 / 0.5$spacing-03
Checkbox iconpadding-left16 / 1$spacing-05
padding-right8 / 0.5$spacing-03
Structure and spacing for a multiselect dropdown

Structure and spacing measurements for a multiselect dropdown | px / rem

Inline dropdown

ElementPropertypx / remSpacing token
Field textpadding-right, padding-left16 / 1$spacing-05
Menu optionpadding-right, padding-left16 / 1$spacing-05
Chevron iconpadding-left16 / 1$spacing-05
Structure and spacing for inline dropdown

Structure and spacing for inline dropdown | px / rem