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.

Default and new selection state examples for Select

Examples of default and new selection select states

Interaction states

ElementPropertyColor token
Input:focusborder$focus
Input:invalidborder$support-error
Error messagetext color$support-error
Input:disabledbackground$field *
border-bottomtransparent
Field text:disabledtext color$text-disabled
Open, disabled, and more information/help state examples for Select

Examples of open, disabled, and help select 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
Error message12 / 0.75Regular / 400$label-01

Structure

Select

ElementPropertypx / remSpacing token
Labelmargin-bottom8 / 0.5$spacing-03
Inputpadding-left16 / 1$spacing-05
Arrowpadding-left, padding-right16 / 1$spacing-05
Fieldborder-bottom1px–
Structure and spacing measurements for select

Structure and spacing measurements for select | px / rem

Inline select

ElementPropertypx / remSpacing token
Inputpadding-left8 / 0.5$spacing-03
Arrowpadding-left, padding-right8 / 0.5$spacing-03
Structure and spacing measurements for Inline Select

Structure and spacing measurements for inline select (focused) | 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