Text input

Color

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

ClassPropertyColor token
.bx--labeltext color$text-02
.bx--text-inputtext color$text-01
.bx--text-input::placeholdertext color$text-03
.bx--form__helper-texttext color$text-02
.bx--text-inputbackground-color$field-01
.bx--text-input--lightbackground-color$field-02
.bx--text-inputborder-bottom$ui-04
Default and user input states for text input in both field colors

Examples of default and user-input states for text input in both $field-02 (left) and $field-01 (right)

Interactive states

ClassPropertyColor token
.bx--text-input:focusborder$focus
.bx--text-input[data-invalid]boorder$support-01
.bx--form-requirementtext color$support-01
warning--filledsvg$support-01

Typography

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

ClassFont-size (px/rem)Font-weightType token
.bx--label12 / 0.75Regular / 400$label-01
.bx--text-input14 / 0.875Regular / 400$body-long-01
.bx--form__helper-text12 / 0.75Regular / 400$label-01
.bx--form-requirement12 / 0.75Regular / 400$label-01

Structure

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

Structure and spacing measurements for text input | px / rem

Active, help, error or disabled states for text input

Examples of active, help, error and disabled text input states