Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Select

Color

Inputs come in two different colors. The default input color is $field-01 and is used on $ui-background and $ui-02 page backgrounds. The --light version input color is $field-02 and is used on $ui-01 page backgrounds.

ClassPropertyColor toke
.bx--select-inputbackground$field-01
.bx--select--lightbackground$field-02
.bx--select--inlinebackgroundtransparent
.bx--labeltext color$text-01
.bx--select-inputtext color$text-01
.bx--select--inlinetext color$icon-01
.bx--select__arrowfill$icon-01
Default and new selection state examples for Select

Examples of default and new selection select states

Interaction states

ClassPropertyColor token
.bx--select-input:focusborder$focus
.bx--select-input[data-invalid]border$support-01
.bx--form-requirementtext color$support-01
.bx--select-input:disabledbackground$disabled-01
.bx--select-input:disabledtext color$disabled-02

Open: Style determined by browser

Help text: Help text appears below the label when the input is active. Help text remains visible while the input is focused and disappears after focus away.

Error: Error messages appear below the input field and are always present while invalid.

Disabled: Disabled state has a .not-allowed cursor hover.

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.

ClassFont-size (px/rem)Font-weightType token
.bx--label12 / 0. 75Regular / 400$label-01
.bx--select-input14 / 0.875Regular / 400$body-short-01
.bx--select--inline14 / 0.875Regular / 400$body-short-01
.bx--form-requirement12 / 0.75Regular / 400$label-01

Structure

Select

ClassPropertypx / remSpacing token
.bx--select-inputheight40 / 2.5–
.bx--labelmargin-bottom8 / 0.5$spacing-03
.bx--select-inputpadding-left16 / 1$spacing-05
.bx--select__arrowpadding-left, padding-right16 / 1$spacing-05
.bx--select-inputborder-bottom1px–
.bx--select-input:focusborder2px–
Structure and spacing measurements for select

Structure and spacing measurements for select | px / rem

Small Select

ClassPropertypx / remSpacing token
.bx--select-inputheight32 / 2–
.bx--select-inputpadding-left8 / 0.5$spacing-03
.bx--select__arrowpadding-left, padding-right8 / 0.5$spacing-03
Structure and spacing measurements for small select

Structure and spacing measurements for small select | px / rem & examples of open and disabled small select states

Inline select

ClassPropertypx / remSpacing token
.bx--select-inputheight32 / 2–
.bx--select-inputpadding-left8 / 0.5$spacing-03
.bx--select__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