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

* Denotes a contextual color token that will change values based on the layer it is placed on.

Default 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 *
Fieldborder-bottomtransparent
Fieldtext-color$text-disabled
Labeltext-color$text-disabled
Chevron iconsvg$icon-disabled

* Denotes a contextual color token that will change values based on the layer it is placed on.

Default dropdown and combo-box states

Dropdown and combo box states

Default 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

* Denotes a contextual color token that will change values based on the layer it is placed on.

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 menu option text should not exceed three words.

ElementFont-size (px/rem)Font-weightType token
Label12 / 0.75Regular / 400$label-01
Field text14 / 0.875Regular / 400$body-compact-01
Menu option text14 / 0.875Regular / 400$body-compact-01
Helper text12 / 0.75Regular / 400$helper-text-01
Error message12 / 0.75Regular / 400$label-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.

Default dropdown

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 default dropdown

Structure and spacing measurements for default dropdown | px / rem

Fluid dropdown

ElementPropertypx / remSpacing token
Labelmargin-bottom4 / 0.25$spacing-02
Fieldpadding-left16 / 1$spacing-05
padding-right48 / 3$spacing-09
border-bottom1px–
margin-top, margin-bottom13 / .8125–
Chevron iconpadding-right, padding-left16 / 1$spacing-05
State iconpadding-right, padding-left16 / 1$spacing-05
Structure and spacing for a fluid dropdown

Structure and spacing measurements for a fluid dropdown | 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

Sizes

Default inputs

The field height and menu option height should always match. These size 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 itemSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Sizes for dropdown

Default dropdown sizes | px / rem

Fluid inputs

There is only one input height but there are two menu item sizes–default and condensed.

ElementSizeHeight px / rem
FieldDefault64 / 4
Menu itemDefault64 / 4
Condensed40 / 2.5
Sizes for dropdown

Fluid dropdown sizes | px / rem

Edit this page on GitHub
Previous
Dropdown: Usage
Next
Dropdown: Code