Skip to main contentCarbon Design System

Select

Color

ElementPropertyColor token
Fieldbackground$field *
border-bottom$border-strong *
Inline selectbackgroundtransparent
Labeltext color$text-secondary
Field texttext color$text-primary
Helper texttext color$text-helper
Iconfill$icon-primary

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

Select interactive states

Interactive states

StateElementPropertyColor token
HoverFieldbackground-color$field-hover *
FocusFieldborder$focus
InvalidFieldborder$support-error
Error messagetext-color$text-error
Error iconfill$support-error
WarningWarning messagetext-color$text-primary
Warning iconfill$support-warning
DisabledFieldbackground-color$field *
Input texttext-color`$text-disabled
Fieldborder-bottomtransparent
Field (fluid)border-bottom$border-subtle *
Labeltext-color$text-disabled
Chevron iconfill$icon-disabled
  • Denotes a contextual color token that will change values based on the layer it is placed on.
Select interactive states

Typography

Select text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Select text should be three words or less.

ElementFont-size (px/rem)Font-weightType token
Label12 / 0.75Regular / 400$label-01
Field text14 / 0.875Regular / 400$body-compact-01
Helper text12 / 0.75Regular / 400$helper-text
Warning message12 / 0.75Regular / 400$label-01
Error message12 / 0.75Regular / 400$label-01

Structure

Fixed select

Default


ElementPropertypx / remSpacing token
Labelmargin-bottom8 / 0.5$spacing-03
Input textpadding-left16 / 1$spacing-05
Helper textmargin-top4 / 0.25$spacing-02
Fieldpadding-left16 / 1$spacing-05
padding-right48 / 3$spacing-09
border-bottom1px
Chevron iconpadding-left, padding-right16 / 1$spacing-05
State iconpadding-left, padding-right16 / 1$spacing-05
Structure and spacing measurements for fixed default select

Structure and spacing measurements for fixed default select | px / rem

Inline


ElementPropertypx / remSpacing token
Input textpadding-left16 / 1$spacing-05
padding-right8 / 0.5$spacing-03
Chevron iconpadding-right16 / 1$spacing-05
padding-left8 / 0.5$spacing-03
Structure and spacing measurements for fixed inline select

Structure and spacing measurements for fixed inline select | px / rem

Fluid select

Default


ElementPropertypx / remSpacing token
Labelmargin-bottom4 / .25$spacing-02
Input textpadding-left16 / 1$spacing-05
Helper textmargin-top4 / .25$spacing-02
Fieldpadding-left16 / 1$spacing-05
padding-right48 / 3$spacing-09
border-bottom1px
Chevron iconpadding-left, padding-right16 / 1$spacing-05
State iconpadding-left, padding-right16 / 1$spacing-05
Structure and spacing measurements for Inline Select

Structure and spacing measurements for fluid select | px / rem

Size

ElementSizeHeight (px / rem)
InputSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Sizes for select

Sizes for default select | px / rem

Sizes for select

Sizes for inline select | px / rem