---
url: /components/text-fields/specs.md
description: >-
  Text fields let users enter text into a UI. They typically appear in forms and
  dialogs.
---

# Text fields

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

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Tokens & specs

Browse the component elements, attributes, tokens, and their values. [Learn about design tokens](../../foundations/design-tokens/overview.md)

::: token-table token-table-60990dd98dea0998-5e892d0b
**Text fields tokens** · 2 token sets · 173 tokens · [live token table](https://m3.material.io/components/text-fields/specs) · 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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.comp.filled-text-field.label-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.filled-text-field.label-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.filled-text-field.label-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.filled-text-field.label-text.line-height` → `md.sys.typescale.body-large.line-height`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.comp.filled-text-field.supporting-text.font` → `md.sys.typescale.body-small.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.filled-text-field.supporting-text.weight` → `md.sys.typescale.body-small.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.filled-text-field.supporting-text.size` → `md.sys.typescale.body-small.size`<br>line height: `md.comp.filled-text-field.supporting-text.line-height` → `md.sys.typescale.body-small.line-height`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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<br>font names: `md.comp.filled-text-field.input-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.filled-text-field.input-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.filled-text-field.input-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.filled-text-field.input-text.line-height` → `md.sys.typescale.body-large.line-height`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.error100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.error100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.error100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.comp.outlined-text-field.label-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.outlined-text-field.label-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.outlined-text-field.label-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.outlined-text-field.label-text.line-height` → `md.sys.typescale.body-large.line-height`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.comp.outlined-text-field.supporting-text.font` → `md.sys.typescale.body-small.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.outlined-text-field.supporting-text.weight` → `md.sys.typescale.body-small.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.outlined-text-field.supporting-text.size` → `md.sys.typescale.body-small.size`<br>line height: `md.comp.outlined-text-field.supporting-text.line-height` → `md.sys.typescale.body-small.line-height`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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<br>font names: `md.comp.outlined-text-field.input-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.outlined-text-field.input-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.outlined-text-field.input-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.outlined-text-field.input-text.line-height` → `md.sys.typescale.body-large.line-height`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.error100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.error100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.error100`<br>High contrast: `#FFFFFF` via `md.ref.palette.error100` |
:::

## Filled text field

![Diagram of a filled text field indicating the 10 parts of its anatomy.](/assets/43e60a33-m2j3wjd6-1.F1M5S1qp.webp)

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](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). 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](../../foundations/design-tokens/overview.md)

![Diagram of a filled text field indicating its color mappings.](/assets/405a9234-m2j3x0d6-2-3p.BofgKbgf.webp)

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](../../foundations/interaction/states/overview.md)

![Side by side view of empty and populated filled text fields across different states, showing the differences between enabled, focused, hovered, and disabled.](/assets/75efd10a-lyqwy2pr-3.B0SUkamH.webp)

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](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") 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.

![Side by side view of empty and populated filled text fields across different error states, showing the differences between enabled, focused, hovered.](/assets/ed65dc5d-lyqx5pjx-4.BIuxzQYf.webp)

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

### Filled text field measurements

![Diagram showing layout values and paddings for filled text fields without icons.](/assets/5b74d8bf-lyqxam89-5.CMEPwizd.webp)

Padding and size measurements without icons

![Diagram showing layout values and paddings for outlined text fields with leading and trailing icons.](/assets/391cbb8c-lyqxhgvg-6.BZ2MmVwo.webp)

Padding and size measurements with icons

![A diagram showing layout values and paddings for supporting text, and supporting text in combination with a character count.](/assets/dbb90343-m4adcnvc-7-3p.I67gQ8BL.webp)

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

![Side by side view of filled text fields in different configurations.](/assets/905e70f2-m84goiff-8-3p.CcE9MTl9.webp)

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

![Diagram of an outlined text field indicating the 9 parts of its anatomy](/assets/ac14cbe3-mhk4c6jn-09-3p.C6cXmzXX.webp)

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](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). 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](../../foundations/design-tokens/overview.md)

![Diagram of an outlined text field indicating its color mappings](/assets/4a25529a-m2j3xtlg-10-3p.fNsC73lf.webp)

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](../../foundations/interaction/states/overview.md)

![Side by side view of empty and populated outlined text fields across different states, showing the differences between enabled, focused, hovered, and disabled.](/assets/c12fa4b6-lyqy69rp-11.OP1pkcE8.webp)

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](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") 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.

![Side by side view of empty and populated filled text fields across different error states, showing the differences between enabled, focused, hovered.](/assets/05eae33b-lyqya4uw-12.-bH00qrW.webp)

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

### Outlined text field measurements

![A diagram showing layout values and paddings for outlined text fields without icons.](/assets/6cf21b09-lyqys303-13.C7S1CYE8.webp)

Padding and size measurements without icons

![A diagram showing layout values and paddings for outlined text fields with leading and trailing icons.](/assets/f49cc844-lyqyuu9g-14.LfZjt_N7.webp)

Padding and size measurements with icons

![A diagram showing layout values and paddings for supporting text, and supporting text in combination with a character count.](/assets/a75fd499-lyqywif5-15.izVS4QcX.webp)

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

![A side by side view of outlined text fields in different configurations.](/assets/6b9159da-m84gq17k-16-3p.jG5iJLUW.webp)

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