Skip to main content

Color

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

ClassPropertySCSSHEX
.bx--select-inputbackground$field-01#f4f7fb
.bx--select-inputtext color$text-01#152935
.bx--select-input::placeholdercolor$text-03#cdd1d4
.bx--select--light.bx--select-inputbackground$field-02#ffffff
.bx--select--inline.bx--select-inputbackgroundtransparent-
.bx--labeltext color$text-01#152935
.bx--select__arrowfill$brand-01#3d70b2
.bx--select--inline.bx--select-inputtext color$brand-01#3d70b2

Default and new selection state examples for Select Examples of default and new selection Select states in $field-02 (right) and $field-01 (left)

States

ClassPropertySCSSHEX
.bx--select-input:focusborder-bottom$brand-01#3d70b2
.bx--select-input:focus ~ .bx--labeltext color$brand-01#3d70b2
.bx--select-input[data-invalid]:focus ~ .bx--labeltext color$support-01#e0182d
.bx--form-requirementtext color$support-01#e0182d
.bx--select-input[data-invalid]border-bottom$support-01#e0182d

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 and appears at 50% opacity.

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 style
.bx--label14 / 0.875Semi-Bold / 600.bx--type-zeta
.bx--select--inline .bx--label14 / 0.875Normal / 400-
.bx--select-input14 / 0.875Normal / 400-
.bx--select--inline.bx--select-input14 / 0.875Semi-Bold / 600.bx--type-zeta
.bx--form-requirement12 / 0.75Normal / 400.bx--type-caption

Structure

Select

ClassPropertypx / remSpacing token
.bx--select-inputheight40 / 2.5-
.bx--labelmargin-bottom8 / 0.5$spacing-xs
.bx--select-inputpadding-right2.5 / 40$spacing-2xl
.bx--select-inputpadding-left16 / 1$spacing-md
.bx--select-inputbox-shadow1px-
.bx--select-input:focusbox-shadow2px-

Structure and spacing measurements for Select Structure and spacing measurements for Select | px / rem

The following specs are not built into the Select component but are recommended by design as the proper amount of space between a Select and other form elements/components.

ClassPropertypx / remSpacing token
.bx--selectmargin-top, margin-bottom16 / 1$spacing-md
.bx--selectmargin-left, margin-right8 / 0.5$spacing-xs

Small Select

ClassPropertypx / remSpacing token
.bx--select-inputheight24 / 1.5-
.bx--select-inputpadding-left, padding-right8 / 0.5$spacing-xs

Structure and spacing measurements for Small Select | px / rem & examples of open and disabled Small Select states

The following specs are not built into the Small Select component but are recommended by design as the proper width for a Small Select.

ClassPropertypx / remSpacing token
.bx--select-inputwidth56 / 3.5-

Inline select

ClassPropertypx / remSpacing token
.bx--select-inputheight32 / 2-
.bx--select-inputpadding-right2.5 / 40$spacing-2xl
.bx--select-inputpadding-left16 / 1$spacing-md

Structure and spacing measurements for Inline Select (focused) | px / rem