Skip to main contentCarbon Design System

Dropdown

The following page documents visual specifications such as color, typography, structure, and size and AI presence.

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
Vertical dividerborder
$border-subtle
*
Menu optiontext-color
$text-secondary
background-color
$layer
*
border-top
$border-subtle
*
Menubox-shadow
0 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
*
SelectedChevron iconsvg
$icon-primary
Vertical dividerborder
$border-subtle
*
Close iconsvg
$icon-primary
Menu optionbackground-color
$layer-selected
*
Menu optioncheckmark
$icon-primary
MultiselectedTagbackground-color
$background-inverse
Tagtext-color
$text-inverse
DisabledFieldbackground-color
$field
*
Field (default)border-bottomtransparent
Field (fluid)border-bottom
$border-subtle
*
Fieldtext-color
$text-disabled
Labeltext-color
$text-disabled
Chevron iconsvg
$icon-disabled
Read-onlyFieldborder-bottom
$border-subtle
*
Field (default)background-colortransparent
Field (fluid)background-color
$field
*
Labeltext-color
$text-secondary
Field text (default)text-color
$text-primary
Field text (fluid)text-color
$text-secondary
Tagbackground-colortransparent
Tagborder
$border-subtle
Tag (default)text-color
$text-primary
Tag (fluid)text-color
$text-secondary
Tagsvg
$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 multiselect 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

Fluid components for all dropdown variants would adhere to the same specs as the dropdown fluid component.

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
Vertical dividerpadding-right, padding-left8 / 0.5
$spacing-03
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

AI presence

The following are the unique styles applied to the component when the AI label is present. Unless specified, all other tokens in the component remain the same as the non-AI variant.

For more information on the AI style elements, see the Carbon for AI guidelines.

ElementPropertyToken / Size
Linear gradientstart
$ai-aura-start-sm
stop
$ai-aura-stop
Fieldborder-bottom
$ai-border-strong
background color
$field
*
AI labelsizemini

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

Default dropdown AI example