Skip to main contentCarbon Design System

Dropdown

Color

Inputs come in two different colors. The default input color is $field-01 and is used on $ui-background and $ui-02 page backgrounds. The --light version input color is $field-02 and is used on $ui-01 page backgrounds.

ElementPropertyColor token
Labeltext color$text-02
Field texttext color$text-01
Field text: prompttext color$text-05
Helper texttext color$text-05
Fieldbackground-color$field-01
border-bottom$ui-04
Field: lightbackground-color$field-02
Chevronsvg$icon-01
Menu optiontext color$text-02
background-color$field-01
border-top$ui-03
Menu option: lightbackground-color$field-02
Menubox-shadow0 2px 6px 0 rgba(0,0,0,.2)
Checkboxbackground-color$icon-01
check$inverse-01
border$icon-01
Dropdown variant examples

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

Interactive states

StateElementPropertyColor token
FocusFieldborder$focus
HoverFieldbackground-color$hover-ui
Menu optionbackground-color$hover-ui
Menu optiontext color$text-01
Field: lightbackground-color$hover-light-ui
Menu option: lightbackground-color$hover-light-ui
InvalidError iconsvg$support-01
Fieldborder$support-01
Error messagetext-color$text-error
WarningWarning messagetext-color$text-01
Warning iconsvg$support-03
ActiveMenu optionbackground-color$selected-ui
Menu option: lightbackground-color$selected-light-ui
SelectedMenu optionbackground-color$selected-ui
Menu optioncheckmark$icon-01
Multi-selectedTagbackground-color$inverse-02
Tagtext color$inverse-02
DisabledFieldbackground-color$disabled-01
Fieldtext color$disabled-02
Labeltext color$disabled-02
Chevronsvg$disabled-02
Dropdown and combo-box states

Dropdown and combo box states

Multi-select dropdown states

Multiselect dropdown states

Inline dropdown

ElementStatePropertyColor token
EnabledFieldbackground-colortransparent
Field texttext color$text-01
Chevronsvg$icon-01
Menu optiontext color$text-02
Menu optionbackground-color$field-01
Menu option: lightbackground-color$field-02
HoverFieldbackground-color$hover-ui
Menu optionbackground-color$hover-ui
Menu optiontext color$text-01
Menu option: lightbackground-color$hover-light-ui
ActiveMenu optionbackground-color$selected-ui
Menu option: lightbackground-color$selected-light-ui
SelectedMenu optionbackground-color$selected-ui
Menu optioncheckmark$icon-01
InvalidError iconsvg$support-01
Fieldborder$support-01
Error messagetext-color$text-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.

ClassFont-sizeFont-weightType style
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 tokens
Labelmargin-bottom8 / 0.5$spacing-03
Fieldpadding-left16 / 1$spacing-05
padding-right48 / 3$spacing-09
border-bottom1px–
Chevronpadding-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.

ElementPropertySizepx / rem
FieldheightSmall32 / 2
heightDefault40 / 2.5
heightLarge48 / 3
Menu optionheightSmall32 / 2
heightDefault40 / 2.5
heightLarge48 / 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–
Chevronpadding-right16 / 1$spacing-05
Clear iconpadding-right8 / .5$spacing-03
Spacing for combo box dropdown

Spacing for combo box dropdown | px / rem

Multiselect dropdown

ElementPropertypx / remSpacing tokens
Labelmargin-bottom8 / 0.5$spacing-03
Fieldpadding-left16 / 1$spacing-05
padding-right48 / 3$spacing-09
Chevronpadding-left, padding-right16 / 1$spacing-05
Tagheight24 / 1.5–
padding-right8 / .5$spacing-03
Checkboxpadding-left16 / 1$spacing-05
padding-right8 / .5$spacing-03
Structure and spacing for a multiselect dropdown

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

Inline dropdown

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

Structure and spacing for inline dropdown | px / rem