Skip to main contentCarbon Design System

Text input

Color

ElementPropertyColor token
Labeltext color$text-secondary
Field texttext color$text-primary
Placeholder texttext color$text-placeholder
Helper texttext color$text-helper
Fieldbackground-color$field *
border-bottom$border-strong *

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

Example of an enabled text input in the fixed style

Interactive states

StateElementPropertyColor token
FocusFieldborder$focus
InvalidFieldborder$support-error
Error messagetext color$text-error
Error iconsvg$support-error
WarningWarning messagetext color$text-primary
Warning iconsvg$support-warning
DisabledFieldbackground$field *
Fieldborder-bottomtransparent
Field texttext color$text-disabled
Examples of text input states in the fixed style

Typography

Text input labels and field 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.

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-01
Error message12 / 0.75Regular / 400$label-01

Structure

Text input – Fixed

ElementPropertypx / remSpacing token
Labelmargin-bottom8 / 0.5$spacing-03
Helper textmargin-top4 / 0.25$spacing-02
Input textpadding-left, padding-right16 / 1$spacing-05
Fieldborder-bottom1px
Focusborder2px
Errorborder2px

Structure and spacing measurements for fixed text input

Structure and spacing measurements for fixed text input | px / rem

Text input – Fluid

ElementPropertypx / remSpacing token
Labelpadding-bottom4 / 0.25$spacing-02
Fieldheight64 / 4$spacing-10
padding-left, padding-right16 / 1$spacing-05
padding-top, padding-bottom13 / 0.8125
border-bottom1px
Focusborder2px
Errorborder2px

Structure and spacing measurements for fluid text input

Structure and spacing measurements for fluid text input | px / rem

Text area – Fixed

ElementPropertypx / remSpacing token
Labelmargin-bottom8 / 0.5$spacing-03
Fieldheightvaries
padding-left, padding-right16 / 1$spacing-05
padding-top, padding-bottom11 / 0.6875
border-bottom1px
Field: focusborder2px
Helper textmargin-top4 / 0.25$spacing-02
Structure and spacing measurements for fixed text area

Structure and spacing measurements for fixed text area | px / rem

Text area – Fluid

ElementPropertypx / remSpacing token
Labelmargin-bottom4 / 0.25$spacing-02
Fieldheightvaries
padding-left, padding-right16 / 1$spacing-05
padding-top, padding-bottom11 / 0.6875
border-bottom1px
Field: focusborder2px
Structure and spacing measurements for fluid text area

Structure and spacing measurements for fluid text area | px / rem

Sizes

These sizes apply only to the fixed style of text input.

ElementSizeHeight (px / rem)
InputSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Sizes for text input

Text input sizes | px / rem