Skip to main contentCarbon Design System

Select

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

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.

Enabled state of default select

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 *
border-bottom (default)transparent
border-bottom (fluid)$border-subtle *
Labeltext-color$text-disabled
Input texttext-color$text-disabled
Chevron iconfill$icon-disabled
Read-onlyFieldbackground-color (default)transparent
background-color (fluid)$field *
border-bottom$border-subtle *
Labeltext-color$text-secondary
Input texttext-color (default)$text-primary
text-color (fluid)$text-secondary
Chevron iconfill$icon-disabled

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

Interactive states of default select

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

Default select

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

Structure and spacing measurements for default select | px / rem

Default inline select

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 default inline select

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

Fluid select

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 fluid select

Structure and spacing measurements for fluid select | px / rem

Size

Default select

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

Sizes for default select | px / rem

Sizes for inline select

Sizes for default inline select | px / rem

Fluid select

ElementSizeHeight (px / rem)
FieldDefault64 / 4
Size for fluid select

Size for fluid select | px / rem

AI presence

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

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.

Structure and spacing measurements for default select with AI

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.