Text fields

Text fields let users enter text into a UI. They typically appear in forms and dialogs.

Overview · Specs · Guidelines · Accessibility

Tokens & specs

Browse the component elements, attributes, tokens, and their values. Learn about design tokens

Design tokens

Token table

Machine-readable relationship table

Text fields tokens · 2 token sets · 173 tokens · live token table · DSDB TOKEN_TABLE.60990dd98dea0998

• Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · Language height: Small
• Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

Text field - Filled · md.comp.filled-text-field · 89 tokens

For filled text fields.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.filled-text-field.container.color	Color	md.sys.color.surface-container-highest → md.ref.palette.neutral90	#E6E0E9	Dark: #36343B via md.ref.palette.neutral22
Enabled › Container	md.comp.filled-text-field.container.height (deprecated)	Length	—	56dp	—
Enabled › Container	md.comp.filled-text-field.container.shape	Shape	md.sys.shape.corner.extra-small.top	Rounded corners: top-left 4dp, top-right 4dp	—
Enabled › Label text	md.comp.filled-text-field.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Label text	md.comp.filled-text-field.label-text.font	Font names	md.sys.typescale.body-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.filled-text-field.label-text.line-height	Line height	md.sys.typescale.body-large.line-height	24pt	—
Enabled › Label text	md.comp.filled-text-field.label-text.size	Font size	md.sys.typescale.body-large.size	16pt	—
Enabled › Label text	md.comp.filled-text-field.label-text.weight	Font weight	md.sys.typescale.body-large.weight → md.ref.typeface.weight-regular	400	—
Enabled › Label text	md.comp.filled-text-field.label-text.tracking	Font tracking	md.sys.typescale.body-large.tracking	0.5pt	—
Enabled › Label text	md.comp.filled-text-field.label-text.type	Typography	composite font names: md.comp.filled-text-field.label-text.font → md.sys.typescale.body-large.font → md.ref.typeface.plain font weight: md.comp.filled-text-field.label-text.weight → md.sys.typescale.body-large.weight → md.ref.typeface.weight-regular font size: md.comp.filled-text-field.label-text.size → md.sys.typescale.body-large.size line height: md.comp.filled-text-field.label-text.line-height → md.sys.typescale.body-large.line-height font tracking: md.comp.filled-text-field.label-text.tracking → md.sys.typescale.body-large.tracking	Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt	—
Enabled › Label text	md.comp.filled-text-field.label-text.populated.line-height	Line height	md.sys.typescale.body-small.line-height	16pt	—
Enabled › Label text	md.comp.filled-text-field.label-text.populated.size	Font size	md.sys.typescale.body-small.size	12pt	—
Enabled › Leading icon	md.comp.filled-text-field.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Leading icon	md.comp.filled-text-field.leading-icon.size	Length	—	24dp	—
Enabled › Trailing icon	md.comp.filled-text-field.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Trailing icon	md.comp.filled-text-field.trailing-icon.size	Length	—	24dp	—
Enabled › Active indicator	md.comp.filled-text-field.active-indicator.height	Length	—	1dp	—
Enabled › Active indicator	md.comp.filled-text-field.active-indicator.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Supporting text	md.comp.filled-text-field.supporting-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Supporting text	md.comp.filled-text-field.supporting-text.font	Font names	md.sys.typescale.body-small.font → md.ref.typeface.plain	Roboto	—
Enabled › Supporting text	md.comp.filled-text-field.supporting-text.line-height	Line height	md.sys.typescale.body-small.line-height	16pt	—
Enabled › Supporting text	md.comp.filled-text-field.supporting-text.size	Font size	md.sys.typescale.body-small.size	12pt	—
Enabled › Supporting text	md.comp.filled-text-field.supporting-text.weight	Font weight	md.sys.typescale.body-small.weight → md.ref.typeface.weight-regular	400	—
Enabled › Supporting text	md.comp.filled-text-field.supporting-text.tracking	Font tracking	md.sys.typescale.body-small.tracking	0.4pt	—
Enabled › Supporting text	md.comp.filled-text-field.supporting-text.type	Typography	composite font names: md.comp.filled-text-field.supporting-text.font → md.sys.typescale.body-small.font → md.ref.typeface.plain font weight: md.comp.filled-text-field.supporting-text.weight → md.sys.typescale.body-small.weight → md.ref.typeface.weight-regular font size: md.comp.filled-text-field.supporting-text.size → md.sys.typescale.body-small.size line height: md.comp.filled-text-field.supporting-text.line-height → md.sys.typescale.body-small.line-height font tracking: md.comp.filled-text-field.supporting-text.tracking → md.sys.typescale.body-small.tracking	Roboto · weight 400 · size 12pt · line height 16pt · tracking 0.4pt	—
Enabled › Input text	md.comp.filled-text-field.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Input text	md.comp.filled-text-field.input-text.font	Font names	md.sys.typescale.body-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Input text	md.comp.filled-text-field.input-text.line-height	Line height	md.sys.typescale.body-large.line-height	24pt	—
Enabled › Input text	md.comp.filled-text-field.input-text.size	Font size	md.sys.typescale.body-large.size	16pt	—
Enabled › Input text	md.comp.filled-text-field.input-text.weight	Font weight	md.sys.typescale.body-large.weight → md.ref.typeface.weight-regular	400	—
Enabled › Input text	md.comp.filled-text-field.input-text.tracking	Font tracking	md.sys.typescale.body-large.tracking	0.5pt	—
Enabled › Input text	md.comp.filled-text-field.input-text.type	Typography	composite font names: md.comp.filled-text-field.input-text.font → md.sys.typescale.body-large.font → md.ref.typeface.plain font weight: md.comp.filled-text-field.input-text.weight → md.sys.typescale.body-large.weight → md.ref.typeface.weight-regular font size: md.comp.filled-text-field.input-text.size → md.sys.typescale.body-large.size line height: md.comp.filled-text-field.input-text.line-height → md.sys.typescale.body-large.line-height font tracking: md.comp.filled-text-field.input-text.tracking → md.sys.typescale.body-large.tracking	Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt	—
Enabled › Input text	md.comp.filled-text-field.input-text.prefix.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Input text	md.comp.filled-text-field.input-text.suffix.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Input text	md.comp.filled-text-field.input-text.placeholder.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Caret	md.comp.filled-text-field.caret.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Disabled › Container	md.comp.filled-text-field.disabled.container.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.filled-text-field.disabled.container.opacity	Opacity	—	0.04	—
Disabled › Label text	md.comp.filled-text-field.disabled.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Label text	md.comp.filled-text-field.disabled.label-text.opacity	Opacity	—	0.38	—
Disabled › Leading icon	md.comp.filled-text-field.disabled.leading-icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Leading icon	md.comp.filled-text-field.disabled.leading-icon.opacity	Opacity	—	0.38	—
Disabled › Trailing icon	md.comp.filled-text-field.disabled.trailing-icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Trailing icon	md.comp.filled-text-field.disabled.trailing-icon.opacity	Opacity	—	0.38	—
Disabled › Supporting text	md.comp.filled-text-field.disabled.supporting-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Supporting text	md.comp.filled-text-field.disabled.supporting-text.opacity	Opacity	—	0.38	—
Disabled › Input text	md.comp.filled-text-field.disabled.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Input text	md.comp.filled-text-field.disabled.input-text.opacity	Opacity	—	0.38	—
Disabled › Active indicator	md.comp.filled-text-field.disabled.active-indicator.height	Length	—	1dp	—
Disabled › Active indicator	md.comp.filled-text-field.disabled.active-indicator.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Active indicator	md.comp.filled-text-field.disabled.active-indicator.opacity	Opacity	—	0.38	—
Hovered › Label text	md.comp.filled-text-field.hover.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.filled-text-field.hover.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › State layer	md.comp.filled-text-field.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › Leading icon	md.comp.filled-text-field.hover.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › Trailing icon	md.comp.filled-text-field.hover.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › Input text	md.comp.filled-text-field.hover.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › Supporting text	md.comp.filled-text-field.hover.supporting-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › Active indicator	md.comp.filled-text-field.hover.active-indicator.height	Length	—	1dp	—
Hovered › Active indicator	md.comp.filled-text-field.hover.active-indicator.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › Label text	md.comp.filled-text-field.focus.label-text.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Leading icon	md.comp.filled-text-field.focus.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Trailing icon	md.comp.filled-text-field.focus.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Input text	md.comp.filled-text-field.focus.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › Supporting text	md.comp.filled-text-field.focus.supporting-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Active indicator	md.comp.filled-text-field.focus.active-indicator.height	Length	—	2dp	—
Focused › Active indicator	md.comp.filled-text-field.focus.active-indicator.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Active indicator	md.comp.filled-text-field.focus.active-indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp	—
Error	md.comp.filled-text-field.error.active-indicator.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error	md.comp.filled-text-field.error.label-text.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error	md.comp.filled-text-field.error.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Error	md.comp.filled-text-field.error.supporting-text.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error	md.comp.filled-text-field.error.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Error	md.comp.filled-text-field.error.trailing-icon.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Focus	md.comp.filled-text-field.error.focus.active-indicator.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Focus	md.comp.filled-text-field.error.focus.label-text.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Focus	md.comp.filled-text-field.error.focus.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Error › Focus	md.comp.filled-text-field.error.focus.supporting-text.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Focus	md.comp.filled-text-field.error.focus.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Error › Focus	md.comp.filled-text-field.error.focus.trailing-icon.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Focus	md.comp.filled-text-field.error.focus.caret.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Hover	md.comp.filled-text-field.error.hover.active-indicator.color	Color	md.sys.color.on-error-container → md.ref.palette.error30	#8C1D18	Dark: #F9DEDC via md.ref.palette.error90 Medium contrast: #FFFFFF via md.ref.palette.error100 High contrast: #FFFFFF via md.ref.palette.error100
Error › Hover	md.comp.filled-text-field.error.hover.label-text.color	Color	md.sys.color.on-error-container → md.ref.palette.error30	#8C1D18	Dark: #F9DEDC via md.ref.palette.error90 Medium contrast: #FFFFFF via md.ref.palette.error100 High contrast: #FFFFFF via md.ref.palette.error100
Error › Hover	md.comp.filled-text-field.error.hover.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Error › Hover	md.comp.filled-text-field.error.hover.supporting-text.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Hover	md.comp.filled-text-field.error.hover.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Error › Hover	md.comp.filled-text-field.error.hover.trailing-icon.color	Color	md.sys.color.on-error-container → md.ref.palette.error30	#8C1D18	Dark: #F9DEDC via md.ref.palette.error90 Medium contrast: #FFFFFF via md.ref.palette.error100 High contrast: #FFFFFF via md.ref.palette.error100
Error › Hover	md.comp.filled-text-field.error.hover.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Error › Hover	md.comp.filled-text-field.error.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—

Text field - Outlined · md.comp.outlined-text-field · 84 tokens

For outlined text fields.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.outlined-text-field.container.height (deprecated)	Length	—	56dp	—
Enabled › Container	md.comp.outlined-text-field.container.shape	Shape	md.sys.shape.corner.extra-small	Rounded corners 4dp	—
Enabled › Outline	md.comp.outlined-text-field.outline.width	Length	—	1dp	—
Enabled › Outline	md.comp.outlined-text-field.outline.color	Color	md.sys.color.outline → md.ref.palette.neutral-variant50	#79747E	Dark: #938F99 via md.ref.palette.neutral-variant60 Medium contrast: #49454F via md.ref.palette.neutral-variant30 High contrast: #322F37 via md.ref.palette.neutral-variant20
Enabled › Label text	md.comp.outlined-text-field.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Label text	md.comp.outlined-text-field.label-text.font	Font names	md.sys.typescale.body-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.outlined-text-field.label-text.line-height	Line height	md.sys.typescale.body-large.line-height	24pt	—
Enabled › Label text	md.comp.outlined-text-field.label-text.size	Font size	md.sys.typescale.body-large.size	16pt	—
Enabled › Label text	md.comp.outlined-text-field.label-text.weight	Font weight	md.sys.typescale.body-large.weight → md.ref.typeface.weight-regular	400	—
Enabled › Label text	md.comp.outlined-text-field.label-text.tracking	Font tracking	md.sys.typescale.body-large.tracking	0.5pt	—
Enabled › Label text	md.comp.outlined-text-field.label-text.type	Typography	composite font names: md.comp.outlined-text-field.label-text.font → md.sys.typescale.body-large.font → md.ref.typeface.plain font weight: md.comp.outlined-text-field.label-text.weight → md.sys.typescale.body-large.weight → md.ref.typeface.weight-regular font size: md.comp.outlined-text-field.label-text.size → md.sys.typescale.body-large.size line height: md.comp.outlined-text-field.label-text.line-height → md.sys.typescale.body-large.line-height font tracking: md.comp.outlined-text-field.label-text.tracking → md.sys.typescale.body-large.tracking	Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt	—
Enabled › Label text	md.comp.outlined-text-field.label-text.populated.line-height	Line height	md.sys.typescale.body-small.line-height	16pt	—
Enabled › Label text	md.comp.outlined-text-field.label-text.populated.size	Font size	md.sys.typescale.body-small.size	12pt	—
Enabled › Leading icon	md.comp.outlined-text-field.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Leading icon	md.comp.outlined-text-field.leading-icon.size	Length	—	24dp	—
Enabled › Trailing icon	md.comp.outlined-text-field.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Trailing icon	md.comp.outlined-text-field.trailing-icon.size	Length	—	24dp	—
Enabled › Supporting text	md.comp.outlined-text-field.supporting-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Supporting text	md.comp.outlined-text-field.supporting-text.font	Font names	md.sys.typescale.body-small.font → md.ref.typeface.plain	Roboto	—
Enabled › Supporting text	md.comp.outlined-text-field.supporting-text.line-height	Line height	md.sys.typescale.body-small.line-height	16pt	—
Enabled › Supporting text	md.comp.outlined-text-field.supporting-text.size	Font size	md.sys.typescale.body-small.size	12pt	—
Enabled › Supporting text	md.comp.outlined-text-field.supporting-text.weight	Font weight	md.sys.typescale.body-small.weight → md.ref.typeface.weight-regular	400	—
Enabled › Supporting text	md.comp.outlined-text-field.supporting-text.tracking	Font tracking	md.sys.typescale.body-small.tracking	0.4pt	—
Enabled › Supporting text	md.comp.outlined-text-field.supporting-text.type	Typography	composite font names: md.comp.outlined-text-field.supporting-text.font → md.sys.typescale.body-small.font → md.ref.typeface.plain font weight: md.comp.outlined-text-field.supporting-text.weight → md.sys.typescale.body-small.weight → md.ref.typeface.weight-regular font size: md.comp.outlined-text-field.supporting-text.size → md.sys.typescale.body-small.size line height: md.comp.outlined-text-field.supporting-text.line-height → md.sys.typescale.body-small.line-height font tracking: md.comp.outlined-text-field.supporting-text.tracking → md.sys.typescale.body-small.tracking	Roboto · weight 400 · size 12pt · line height 16pt · tracking 0.4pt	—
Enabled › Input text	md.comp.outlined-text-field.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Input text	md.comp.outlined-text-field.input-text.font	Font names	md.sys.typescale.body-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Input text	md.comp.outlined-text-field.input-text.line-height	Line height	md.sys.typescale.body-large.line-height	24pt	—
Enabled › Input text	md.comp.outlined-text-field.input-text.size	Font size	md.sys.typescale.body-large.size	16pt	—
Enabled › Input text	md.comp.outlined-text-field.input-text.weight	Font weight	md.sys.typescale.body-large.weight → md.ref.typeface.weight-regular	400	—
Enabled › Input text	md.comp.outlined-text-field.input-text.tracking	Font tracking	md.sys.typescale.body-large.tracking	0.5pt	—
Enabled › Input text	md.comp.outlined-text-field.input-text.type	Typography	composite font names: md.comp.outlined-text-field.input-text.font → md.sys.typescale.body-large.font → md.ref.typeface.plain font weight: md.comp.outlined-text-field.input-text.weight → md.sys.typescale.body-large.weight → md.ref.typeface.weight-regular font size: md.comp.outlined-text-field.input-text.size → md.sys.typescale.body-large.size line height: md.comp.outlined-text-field.input-text.line-height → md.sys.typescale.body-large.line-height font tracking: md.comp.outlined-text-field.input-text.tracking → md.sys.typescale.body-large.tracking	Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt	—
Enabled › Input text	md.comp.outlined-text-field.input-text.suffix.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Input text	md.comp.outlined-text-field.input-text.prefix.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Input text	md.comp.outlined-text-field.input-text.placeholder.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Caret	md.comp.outlined-text-field.caret.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Caret	md.comp.outlined-text-field.error.focus.caret.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Disabled › Label text	md.comp.outlined-text-field.disabled.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Label text	md.comp.outlined-text-field.disabled.label-text.opacity	Opacity	—	0.38	—
Disabled › Leading icon	md.comp.outlined-text-field.disabled.leading-icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Leading icon	md.comp.outlined-text-field.disabled.leading-icon.opacity	Opacity	—	0.38	—
Disabled › Trailing icon	md.comp.outlined-text-field.disabled.trailing-icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Trailing icon	md.comp.outlined-text-field.disabled.trailing-icon.opacity	Opacity	—	0.38	—
Disabled › Outline	md.comp.outlined-text-field.disabled.outline.width	Length	—	1dp	—
Disabled › Outline	md.comp.outlined-text-field.disabled.outline.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Outline	md.comp.outlined-text-field.disabled.outline.opacity	Opacity	—	0.12	—
Disabled › Supporting text	md.comp.outlined-text-field.disabled.supporting-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Supporting text	md.comp.outlined-text-field.disabled.supporting-text.opacity	Opacity	—	0.38	—
Disabled › Input text	md.comp.outlined-text-field.disabled.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Input text	md.comp.outlined-text-field.disabled.input-text.opacity	Opacity	—	0.38	—
Hovered › Label text	md.comp.outlined-text-field.hover.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › Leading icon	md.comp.outlined-text-field.hover.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › Trailing icon	md.comp.outlined-text-field.hover.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › Outline	md.comp.outlined-text-field.hover.outline.width	Length	—	1dp	—
Hovered › Outline	md.comp.outlined-text-field.hover.outline.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › Input text	md.comp.outlined-text-field.hover.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › Supporting text	md.comp.outlined-text-field.hover.supporting-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Label text	md.comp.outlined-text-field.focus.label-text.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Leading icon	md.comp.outlined-text-field.focus.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Trailing icon	md.comp.outlined-text-field.focus.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Outline	md.comp.outlined-text-field.focus.outline.width	Length	—	3dp	—
Focused › Outline	md.comp.outlined-text-field.focus.outline.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Input text	md.comp.outlined-text-field.focus.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › Supporting text	md.comp.outlined-text-field.focus.supporting-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Focus indicator	md.comp.outlined-text-field.focus.indicator.outline.color (deprecated)	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Focused › Focus indicator	md.comp.outlined-text-field.error.focus.indicator.outline.color (deprecated)	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Focused › Focus indicator	md.comp.outlined-text-field.focus.indicator.outline.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp	—
Error	md.comp.outlined-text-field.error.outline.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error	md.comp.outlined-text-field.error.label-text.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error	md.comp.outlined-text-field.error.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Error	md.comp.outlined-text-field.error.supporting-text.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error	md.comp.outlined-text-field.error.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Error	md.comp.outlined-text-field.error.trailing-icon.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Focus	md.comp.outlined-text-field.error.focus.outline.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Focus	md.comp.outlined-text-field.error.focus.label-text.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Focus	md.comp.outlined-text-field.error.focus.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Error › Focus	md.comp.outlined-text-field.error.focus.supporting-text.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Focus	md.comp.outlined-text-field.error.focus.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Error › Focus	md.comp.outlined-text-field.error.focus.trailing-icon.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Hover	md.comp.outlined-text-field.error.hover.outline.color	Color	md.sys.color.on-error-container → md.ref.palette.error30	#8C1D18	Dark: #F9DEDC via md.ref.palette.error90 Medium contrast: #FFFFFF via md.ref.palette.error100 High contrast: #FFFFFF via md.ref.palette.error100
Error › Hover	md.comp.outlined-text-field.error.hover.label-text.color	Color	md.sys.color.on-error-container → md.ref.palette.error30	#8C1D18	Dark: #F9DEDC via md.ref.palette.error90 Medium contrast: #FFFFFF via md.ref.palette.error100 High contrast: #FFFFFF via md.ref.palette.error100
Error › Hover	md.comp.outlined-text-field.error.hover.input-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Error › Hover	md.comp.outlined-text-field.error.hover.supporting-text.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Error › Hover	md.comp.outlined-text-field.error.hover.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Error › Hover	md.comp.outlined-text-field.error.hover.trailing-icon.color	Color	md.sys.color.on-error-container → md.ref.palette.error30	#8C1D18	Dark: #F9DEDC via md.ref.palette.error90 Medium contrast: #FFFFFF via md.ref.palette.error100 High contrast: #FFFFFF via md.ref.palette.error100

Filled text field

1. Container
2. Leading icon (optional)
3. Label text in empty field
4. Label text in populated field
5. Trailing icon (optional)
6. Focused active Indicator
7. Caret
8. Input text
9. Supporting text (optional)
10. Enabled active indicator

Filled text field color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. Learn more about design tokens

Filled text field color roles used for light and dark schemes:

1. Surface container highest
2. On surface variant
3. On surface variant
4. Primary
5. On surface variant
6. Primary
7. Primary
8. On surface
9. On surface variant
10. On surface

Filled text field states

States are visual representations used to communicate the status of a component or interactive element. Learn more about interaction states

1. Enabled (empty)
2. Focused (empty)
3. Hovered (empty)
4. Disabled (empty)
5. Enabled (populated)
6. Focused (populated)
7. Hovered (populated)
8. Disabled (populated)

Filled text field error states

Error states are visual representations used to communicate the status of a component or interactive element. An error message can display instructions on how to fix it. Error messages are displayed below the text field as supporting text until fixed.

1. Enabled (empty)
2. Focused (empty)
3. Hovered (empty)
4. Enabled (populated)
5. Focused (populated)
6. Hovered (populated)

Filled text field measurements

Padding and size measurements without icons

Padding and size measurements with icons

Padding and size measurements with supporting text and character count

Attribute	Value
Default container height	56dp
Label alignment (unpopulated)	Vertically centered
Top/bottom padding	8dp
Left/right padding without icons	16dp
Left/right padding with icons	12dp
Icon alignment	Vertically centered
Padding between icons and text	16dp
Supporting text and character counter top padding	4dp
Padding between supporting text and character counter	16dp
Target size	56dp

Filled text field configurations

Empty and populated filled text fields with:

1. Supporting text
2. Trailing icon
3. Leading icon
4. Leading and trailing icons
5. Prefix
6. Suffix
7. Multi-line text field

Outlined text field

1. Enabled container outline
2. Leading icon (optional)
3. Label text in empty field
4. Label text in populated field
5. Trailing icon (optional)
6. Focused container outline
7. Caret
8. Input text
9. Supporting text (optional)

Outlined text field color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. Learn more about design tokens

Outlined text field color roles used for light and dark schemes:

1. Outline
2. On surface variant
3. On surface variant
4. Primary
5. On surface variant
6. Primary
7. Primary
8. On surface
9. On surface variant

Outlined text field states

States are visual representations used to communicate the status of a component or interactive element. Learn more about interaction states

1. Enabled (empty)
2. Focused (empty)
3. Hovered (empty)
4. Disabled (empty)
5. Enabled (populated)
6. Focused (populated)
7. Hovered (populated)
8. Disabled (populated)

Outlined text field error states

Error states are visual representations used to communicate the status of a component or interactive element. An error message can display instructions on how to fix it. Error messages are displayed below the text field as supporting text until fixed.

1. Enabled (empty)
2. Focused (empty)
3. Hovered (empty)
4. Enabled (populated)
5. Focused (populated)
6. Hovered (populated)

Outlined text field measurements

Padding and size measurements without icons

Padding and size measurements with icons

Padding and size measurements with supporting text and character count

Attribute	Value
Container height	56dp
Left/right padding without icons	16dp
Left/right padding with icons	12dp
Padding between icons and text	16dp
Icon alignment	Vertically centered
Supporting text and character counter top padding	4dp
Padding between supporting text and character counter	16dp
Label alignment	Vertically centered
Left/right padding populated label text	4dp
Target size	56dp

Outlined text field configurations

Empty and populated outlined text fields with:

1. Supporting text
2. Trailing icon
3. Leading icon
4. Leading and trailing icons
5. Prefix
6. Suffix
7. Multi-line text field