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 default 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 *
Field (default)border-bottomtransparent
Field (fluid)border-bottom$border-subtle *
Field texttext color$text-disabled
Read-onlyField (default)backgroundtransparent
Field (fluid)background$field *
Field text (default)text color$text-primary
Field text (fluid)text color$text-secondary
Fieldborder-bottom$border-subtle *

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

Examples of text input states in the default 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 and warning message12 / 0.75Regular / 400$label-01

Structure

Text input – Default

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

Structure and spacing measurements for default 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 – Default

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 default text area

Structure and spacing measurements for default 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 default style of text input.

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