Skip to main contentCarbon Design System

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
text input states

Interactive states

ClassPropertyColor token
.bx--text-input:focusoutline$focus
.bx--text-input--invalidoutline$support-01
.bx--form-requirementtext color$support-01
.warning--filledsvg$support-01
.bx--text-input:disabledbackground$disabled-01
.bx--text-input:disabledtext color$disabled-02
text input interactive states

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

Text input

ClassPropertypx / remSpacing token
.bx--text-input: defaultheight40 / 2.5–
.bx--text-input: smheight32 / 2–
.bx--text-input: xlheight48 / 3–
.bx--labelmargin-bottom8 / 0.5$spacing-03
.bx--form__helper-textmargin-top4 / 0.25$spacing-02
.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

Text area

ClassPropertypx / remSpacing token
.bx--text-area__wrapperheightvaries–
.bx--labelmargin-bottom8 / 0.5$spacing-03
.bx--form__helper-textmargin-top4 / 0.25$spacing-02
.bx--text-area__wrapperpadding-left, padding-right16 / 1$spacing-05
.bx--text-area__wrapperpadding-top, padding-bottom11 / 0.6875–
.bx--text-area__wrapperborder-bottom1px–
.bx--text-input:focusborder2px–
Structure and spacing measurements for text area

Structure and spacing measurements for text area | px / rem