Skip to main contentCarbon Design System

Text input

The following page documents visual specifications such as color, typography, structure, size, and AI presence.

Color

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 state color


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

Text area 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 area in the default style

Interactive state color


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

Default text input structure

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

Fluid text input structure

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

Default text area structure

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

Fluid text area structure

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

Size

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

Text input default style sizes | px / rem

AI presence

The following are the unique styles applied to the component when the AI label is present. Unless specified, all other tokens in the component remain the same as the non-AI variant. For more information on the AI style elements, see the Carbon for AI guidelines.

ElementPropertyToken / Size
Linear gradientstart
$ai-aura-start-sm
stop
$ai-aura-stop
Fieldborder-bottom
$ai-border-strong
background color
$field
*
AI labelsizemini

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

Default text input and text area AI example

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.