Material Design 3 "Text Field" tokens: All tokens
Preview
Supporting text
Supporting text
Browse tokens
Color
Text field - Select, outlined
Enabled
Container
| Token | Value |
|---|---|
Outlined select menu container colormd.comp.outlined-select.menu.container.color | #F3EDF7 md.comp.outlined-select.menu.container.color
|
Outlined select menu container elevationmd.comp.outlined-select.menu.container.elevation | 3dp md.comp.outlined-select.menu.container.elevation
|
Outlined select menu container shadow colormd.comp.outlined-select.menu.container.shadow-color | #000000 md.comp.outlined-select.menu.container.shadow-color
|
Outlined select menu container shapemd.comp.outlined-select.menu.container.shape | 4dp md.comp.outlined-select.menu.container.shape
|
Outlined select menu container surface tint layer colormd.comp.outlined-select.menu.container.surface-tint-layer.color | #6750A4 md.comp.outlined-select.menu.container.surface-tint-layer.color
|
Outlined select menu list item container heightmd.comp.outlined-select.menu.list-item.container.height | 48dp md.comp.outlined-select.menu.list-item.container.height |
Outlined select menu list item selected container colormd.comp.outlined-select.menu.list-item.selected.container.color | #E6E0E9 md.comp.outlined-select.menu.list-item.selected.container.color
|
Outlined select text field container colormd.comp.outlined-select.text-field.container.color | #E6E0E9 md.comp.outlined-select.text-field.container.color
|
Outlined select text field container heightmd.comp.outlined-select.text-field.container.height | 56dp md.comp.outlined-select.text-field.container.height |
Outlined select text field container shapemd.comp.outlined-select.text-field.container.shape | 4dp md.comp.outlined-select.text-field.container.shape
|
Outlined select text field outline colormd.comp.outlined-select.text-field.outline.color | #79747E md.comp.outlined-select.text-field.outline.color
|
Outlined select text field outline widthmd.comp.outlined-select.text-field.outline.width | 1dp md.comp.outlined-select.text-field.outline.width |
Label text
| Token | Value |
|---|---|
Outlined select menu list item label text colormd.comp.outlined-select.menu.list-item.label-text.color | #1D1B20 md.comp.outlined-select.menu.list-item.label-text.color
|
Outlined select menu list item label text fontmd.comp.outlined-select.menu.list-item.label-text.font | Roboto md.comp.outlined-select.menu.list-item.label-text.font
|
Outlined select menu list item label text line heightmd.comp.outlined-select.menu.list-item.label-text.line-height | 20pt md.comp.outlined-select.menu.list-item.label-text.line-height
|
Outlined select menu list item label text sizemd.comp.outlined-select.menu.list-item.label-text.size | 14pt md.comp.outlined-select.menu.list-item.label-text.size
|
Outlined select menu list item label text trackingmd.comp.outlined-select.menu.list-item.label-text.tracking | 0.1pt md.comp.outlined-select.menu.list-item.label-text.tracking
|
Outlined select menu list item label text type stylemd.comp.outlined-select.menu.list-item.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.outlined-select.menu.list-item.label-text.type
|
Outlined select menu list item label text weightmd.comp.outlined-select.menu.list-item.label-text.weight | 500 md.comp.outlined-select.menu.list-item.label-text.weight
|
Outlined select text field label text colormd.comp.outlined-select.text-field.label-text.color | #49454F md.comp.outlined-select.text-field.label-text.color
|
Outlined select text field label text fontmd.comp.outlined-select.text-field.label-text.font | Roboto md.comp.outlined-select.text-field.label-text.font
|
Outlined select text field label text line heightmd.comp.outlined-select.text-field.label-text.line-height | 24pt md.comp.outlined-select.text-field.label-text.line-height
|
Outlined select text field label text populated line heightmd.comp.outlined-select.text-field.label-text.populated.line-height | 16pt md.comp.outlined-select.text-field.label-text.populated.line-height
|
Outlined select text field label text populated sizemd.comp.outlined-select.text-field.label-text.populated.size | 12pt md.comp.outlined-select.text-field.label-text.populated.size
|
Outlined select text field label text sizemd.comp.outlined-select.text-field.label-text.size | 16pt md.comp.outlined-select.text-field.label-text.size
|
Outlined select text field label text trackingmd.comp.outlined-select.text-field.label-text.tracking | 0.5pt md.comp.outlined-select.text-field.label-text.tracking
|
Outlined select text field label text type stylemd.comp.outlined-select.text-field.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.outlined-select.text-field.label-text.type
|
Outlined select text field label text weightmd.comp.outlined-select.text-field.label-text.weight | 400 md.comp.outlined-select.text-field.label-text.weight
|
Icon
| Token | Value |
|---|---|
Outlined select menu cascading menu indicator icon colormd.comp.outlined-select.menu.cascading-menu-indicator.icon.color | #49454F md.comp.outlined-select.menu.cascading-menu-indicator.icon.color
|
Outlined select menu cascading menu indicator icon sizemd.comp.outlined-select.menu.cascading-menu-indicator.icon.size | 24dp md.comp.outlined-select.menu.cascading-menu-indicator.icon.size |
Leading icon
| Token | Value |
|---|---|
Outlined select menu list item with leading icon leading icon colormd.comp.outlined-select.menu.list-item.with-leading-icon.leading-icon.color | #49454F md.comp.outlined-select.menu.list-item.with-leading-icon.leading-icon.color
|
Outlined select menu list item with leading icon leading icon sizemd.comp.outlined-select.menu.list-item.with-leading-icon.leading-icon.size | 24dp md.comp.outlined-select.menu.list-item.with-leading-icon.leading-icon.size |
Outlined select text field leading icon colormd.comp.outlined-select.text-field.leading-icon.color | #49454F md.comp.outlined-select.text-field.leading-icon.color
|
Outlined select text field leading icon sizemd.comp.outlined-select.text-field.leading-icon.size | 24dp md.comp.outlined-select.text-field.leading-icon.size |
Trailing icon
| Token | Value |
|---|---|
Outlined select menu list item with trailing icon trailing icon colormd.comp.outlined-select.menu.list-item.with-trailing-icon.trailing-icon.color | #49454F md.comp.outlined-select.menu.list-item.with-trailing-icon.trailing-icon.color
|
Outlined select menu list item with trailing icon trailing icon sizemd.comp.outlined-select.menu.list-item.with-trailing-icon.trailing-icon.size | 24dp md.comp.outlined-select.menu.list-item.with-trailing-icon.trailing-icon.size |
Outlined select text field trailing icon colormd.comp.outlined-select.text-field.trailing-icon.color | #49454F md.comp.outlined-select.text-field.trailing-icon.color
|
Outlined select text field trailing icon sizemd.comp.outlined-select.text-field.trailing-icon.size | 24dp md.comp.outlined-select.text-field.trailing-icon.size |
Divider
| Token | Value |
|---|---|
Outlined select menu divider colormd.comp.outlined-select.menu.divider.color | #E7E0EC md.comp.outlined-select.menu.divider.color
|
Outlined select menu divider heightmd.comp.outlined-select.menu.divider.height | 1dp md.comp.outlined-select.menu.divider.height |
Supporting text
| Token | Value |
|---|---|
Outlined select text field supporting text colormd.comp.outlined-select.text-field.supporting-text.color | #49454F md.comp.outlined-select.text-field.supporting-text.color
|
Outlined select text field supporting text fontmd.comp.outlined-select.text-field.supporting-text.font | Roboto md.comp.outlined-select.text-field.supporting-text.font
|
Outlined select text field supporting text line heightmd.comp.outlined-select.text-field.supporting-text.line-height | 16pt md.comp.outlined-select.text-field.supporting-text.line-height
|
Outlined select text field supporting text sizemd.comp.outlined-select.text-field.supporting-text.size | 12pt md.comp.outlined-select.text-field.supporting-text.size
|
Outlined select text field supporting text trackingmd.comp.outlined-select.text-field.supporting-text.tracking | 0.4pt md.comp.outlined-select.text-field.supporting-text.tracking
|
Outlined select text field supporting text type stylemd.comp.outlined-select.text-field.supporting-text.type | Roboto · 12pt · weight 400 · line height 16pt · tracking 0.4pt md.comp.outlined-select.text-field.supporting-text.type
|
Outlined select text field supporting text weightmd.comp.outlined-select.text-field.supporting-text.weight | 400 md.comp.outlined-select.text-field.supporting-text.weight
|
Input text
| Token | Value |
|---|---|
Outlined select text field input text colormd.comp.outlined-select.text-field.input-text.color | #1D1B20 md.comp.outlined-select.text-field.input-text.color
|
Outlined select text field input text fontmd.comp.outlined-select.text-field.input-text.font | Roboto md.comp.outlined-select.text-field.input-text.font
|
Outlined select text field input text line heightmd.comp.outlined-select.text-field.input-text.line-height | 24pt md.comp.outlined-select.text-field.input-text.line-height
|
Outlined select text field input text sizemd.comp.outlined-select.text-field.input-text.size | 16pt md.comp.outlined-select.text-field.input-text.size
|
Outlined select text field input text trackingmd.comp.outlined-select.text-field.input-text.tracking | 0.5pt md.comp.outlined-select.text-field.input-text.tracking
|
Outlined select text field input text type stylemd.comp.outlined-select.text-field.input-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.outlined-select.text-field.input-text.type
|
Outlined select text field input text weightmd.comp.outlined-select.text-field.input-text.weight | 400 md.comp.outlined-select.text-field.input-text.weight
|
Caret
| Token | Value |
|---|---|
Outlined select text field caret colormd.comp.outlined-select.text-field.caret.color | #6750A4 md.comp.outlined-select.text-field.caret.color
|
Disabled
Container
| Token | Value |
|---|---|
Outlined select text field disabled outline colormd.comp.outlined-select.text-field.disabled.outline.color | #1D1B20 md.comp.outlined-select.text-field.disabled.outline.color
|
Outlined select text field disabled outline opacitymd.comp.outlined-select.text-field.disabled.outline.opacity | 12% md.comp.outlined-select.text-field.disabled.outline.opacity |
Outlined select text field disabled outline widthmd.comp.outlined-select.text-field.disabled.outline.width | 1dp md.comp.outlined-select.text-field.disabled.outline.width |
Label text
| Token | Value |
|---|---|
Outlined select text field disabled label text colormd.comp.outlined-select.text-field.disabled.label-text.color | #1D1B20 md.comp.outlined-select.text-field.disabled.label-text.color
|
Outlined select text field disabled label text opacitymd.comp.outlined-select.text-field.disabled.label-text.opacity | 38% md.comp.outlined-select.text-field.disabled.label-text.opacity |
Leading icon
| Token | Value |
|---|---|
Outlined select text field disabled leading icon colormd.comp.outlined-select.text-field.disabled.leading-icon.color | #1D1B20 md.comp.outlined-select.text-field.disabled.leading-icon.color
|
Outlined select text field disabled leading icon opacitymd.comp.outlined-select.text-field.disabled.leading-icon.opacity | 38% md.comp.outlined-select.text-field.disabled.leading-icon.opacity |
Trailing icon
| Token | Value |
|---|---|
Outlined select text field disabled trailing icon colormd.comp.outlined-select.text-field.disabled.trailing-icon.color | #1D1B20 md.comp.outlined-select.text-field.disabled.trailing-icon.color
|
Outlined select text field disabled trailing icon opacitymd.comp.outlined-select.text-field.disabled.trailing-icon.opacity | 38% md.comp.outlined-select.text-field.disabled.trailing-icon.opacity |
Supporting text
| Token | Value |
|---|---|
Outlined select text field disabled supporting text colormd.comp.outlined-select.text-field.disabled.supporting-text.color | #1D1B20 md.comp.outlined-select.text-field.disabled.supporting-text.color
|
Outlined select text field disabled supporting text opacitymd.comp.outlined-select.text-field.disabled.supporting-text.opacity | 38% md.comp.outlined-select.text-field.disabled.supporting-text.opacity |
Input text
| Token | Value |
|---|---|
Outlined select text field disabled input text colormd.comp.outlined-select.text-field.disabled.input-text.color | #1D1B20 md.comp.outlined-select.text-field.disabled.input-text.color
|
Outlined select text field disabled input text opacitymd.comp.outlined-select.text-field.disabled.input-text.opacity | 38% md.comp.outlined-select.text-field.disabled.input-text.opacity |
Hovered
Container
| Token | Value |
|---|---|
Outlined select text field hover outline colormd.comp.outlined-select.text-field.hover.outline.color | #1D1B20 md.comp.outlined-select.text-field.hover.outline.color
|
Outlined select text field hover outline widthmd.comp.outlined-select.text-field.hover.outline.width | 1dp md.comp.outlined-select.text-field.hover.outline.width |
Label text
| Token | Value |
|---|---|
Outlined select text field hover label text colormd.comp.outlined-select.text-field.hover.label-text.color | #1D1B20 md.comp.outlined-select.text-field.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Outlined select text field hover state layer colormd.comp.outlined-select.text-field.hover.state-layer.color | #1D1B20 md.comp.outlined-select.text-field.hover.state-layer.color
|
Outlined select text field hover state layer opacitymd.comp.outlined-select.text-field.hover.state-layer.opacity | 8% md.comp.outlined-select.text-field.hover.state-layer.opacity
|
Leading icon
| Token | Value |
|---|---|
Outlined select text field hover leading icon colormd.comp.outlined-select.text-field.hover.leading-icon.color | #49454F md.comp.outlined-select.text-field.hover.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Outlined select text field hover trailing icon colormd.comp.outlined-select.text-field.hover.trailing-icon.color | #49454F md.comp.outlined-select.text-field.hover.trailing-icon.color
|
Input text
| Token | Value |
|---|---|
Outlined select text field hover input text colormd.comp.outlined-select.text-field.hover.input-text.color | #1D1B20 md.comp.outlined-select.text-field.hover.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Outlined select text field hover supporting text colormd.comp.outlined-select.text-field.hover.supporting-text.color | #49454F md.comp.outlined-select.text-field.hover.supporting-text.color
|
Focused
Container
| Token | Value |
|---|---|
Outlined select text field focus outline colormd.comp.outlined-select.text-field.focus.outline.color | #6750A4 md.comp.outlined-select.text-field.focus.outline.color
|
Outlined select text field focus outline widthmd.comp.outlined-select.text-field.focus.outline.width | 3dp md.comp.outlined-select.text-field.focus.outline.width
|
Label text
| Token | Value |
|---|---|
Outlined select text field focus label text colormd.comp.outlined-select.text-field.focus.label-text.color | #6750A4 md.comp.outlined-select.text-field.focus.label-text.color
|
Leading icon
| Token | Value |
|---|---|
Outlined select text field focus leading icon colormd.comp.outlined-select.text-field.focus.leading-icon.color | #49454F md.comp.outlined-select.text-field.focus.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Outlined select text field focus trailing icon colormd.comp.outlined-select.text-field.focus.trailing-icon.color | #6750A4 md.comp.outlined-select.text-field.focus.trailing-icon.color
|
Input text
| Token | Value |
|---|---|
Outlined select text field focus input text colormd.comp.outlined-select.text-field.focus.input-text.color | #1D1B20 md.comp.outlined-select.text-field.focus.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Outlined select text field focus supporting text colormd.comp.outlined-select.text-field.focus.supporting-text.color | #49454F md.comp.outlined-select.text-field.focus.supporting-text.color
|
Error
| Token | Value |
|---|---|
Outlined select text field error input text colormd.comp.outlined-select.text-field.error.input-text.color | #1D1B20 md.comp.outlined-select.text-field.error.input-text.color
|
Outlined select text field error label text colormd.comp.outlined-select.text-field.error.label-text.color | #B3261E md.comp.outlined-select.text-field.error.label-text.color
|
Outlined select text field error leading icon colormd.comp.outlined-select.text-field.error.leading-icon.color | #49454F md.comp.outlined-select.text-field.error.leading-icon.color
|
Outlined select text field error outline colormd.comp.outlined-select.text-field.error.outline.color | #B3261E md.comp.outlined-select.text-field.error.outline.color
|
Outlined select text field error supporting text colormd.comp.outlined-select.text-field.error.supporting-text.color | #B3261E md.comp.outlined-select.text-field.error.supporting-text.color
|
Outlined select text field error trailing icon colormd.comp.outlined-select.text-field.error.trailing-icon.color | #B3261E md.comp.outlined-select.text-field.error.trailing-icon.color
|
Focus
| Token | Value |
|---|---|
Outlined select text field error focus caret colormd.comp.outlined-select.text-field.error.focus.caret.color | #B3261E md.comp.outlined-select.text-field.error.focus.caret.color
|
Outlined select text field error focus input text colormd.comp.outlined-select.text-field.error.focus.input-text.color | #1D1B20 md.comp.outlined-select.text-field.error.focus.input-text.color
|
Outlined select text field error focus label text colormd.comp.outlined-select.text-field.error.focus.label-text.color | #B3261E md.comp.outlined-select.text-field.error.focus.label-text.color
|
Outlined select text field error focus leading icon colormd.comp.outlined-select.text-field.error.focus.leading-icon.color | #49454F md.comp.outlined-select.text-field.error.focus.leading-icon.color
|
Outlined select text field error focus outline colormd.comp.outlined-select.text-field.error.focus.outline.color | #B3261E md.comp.outlined-select.text-field.error.focus.outline.color
|
Outlined select text field error focus supporting text colormd.comp.outlined-select.text-field.error.focus.supporting-text.color | #B3261E md.comp.outlined-select.text-field.error.focus.supporting-text.color
|
Outlined select text field error focus trailing icon colormd.comp.outlined-select.text-field.error.focus.trailing-icon.color | #B3261E md.comp.outlined-select.text-field.error.focus.trailing-icon.color
|
Hover
| Token | Value |
|---|---|
Outlined select text field error hover input text colormd.comp.outlined-select.text-field.error.hover.input-text.color | #1D1B20 md.comp.outlined-select.text-field.error.hover.input-text.color
|
Outlined select text field error hover label text colormd.comp.outlined-select.text-field.error.hover.label-text.color | #8C1D18 md.comp.outlined-select.text-field.error.hover.label-text.color
|
Outlined select text field error hover leading icon colormd.comp.outlined-select.text-field.error.hover.leading-icon.color | #49454F md.comp.outlined-select.text-field.error.hover.leading-icon.color
|
Outlined select text field error hover outline colormd.comp.outlined-select.text-field.error.hover.outline.color | #8C1D18 md.comp.outlined-select.text-field.error.hover.outline.color
|
Outlined select text field error hover state layer colormd.comp.outlined-select.text-field.error.hover.state-layer.color | #1D1B20 md.comp.outlined-select.text-field.error.hover.state-layer.color
|
Outlined select text field error hover state layer opacitymd.comp.outlined-select.text-field.error.hover.state-layer.opacity | 8% md.comp.outlined-select.text-field.error.hover.state-layer.opacity
|
Outlined select text field error hover supporting text colormd.comp.outlined-select.text-field.error.hover.supporting-text.color | #B3261E md.comp.outlined-select.text-field.error.hover.supporting-text.color
|
Outlined select text field error hover trailing icon colormd.comp.outlined-select.text-field.error.hover.trailing-icon.color | #8C1D18 md.comp.outlined-select.text-field.error.hover.trailing-icon.color
|
Text field - Autocomplete, filled
Enabled
Container
| Token | Value |
|---|---|
Filled autocomplete menu container colormd.comp.filled-autocomplete.menu.container.color | #F3EDF7 md.comp.filled-autocomplete.menu.container.color
|
Filled autocomplete menu container elevationmd.comp.filled-autocomplete.menu.container.elevation | 3dp md.comp.filled-autocomplete.menu.container.elevation
|
Filled autocomplete menu container shadow colormd.comp.filled-autocomplete.menu.container.shadow-color | #000000 md.comp.filled-autocomplete.menu.container.shadow-color
|
Filled autocomplete menu container shapemd.comp.filled-autocomplete.menu.container.shape | 4dp md.comp.filled-autocomplete.menu.container.shape
|
Filled autocomplete menu container surface tint layer colormd.comp.filled-autocomplete.menu.container.surface-tint-layer.color | #6750A4 md.comp.filled-autocomplete.menu.container.surface-tint-layer.color
|
Filled autocomplete menu list item container heightmd.comp.filled-autocomplete.menu.list-item.container.height | 48dp md.comp.filled-autocomplete.menu.list-item.container.height |
Filled autocomplete menu list item selected container colormd.comp.filled-autocomplete.menu.list-item.selected.container.color | #E6E0E9 md.comp.filled-autocomplete.menu.list-item.selected.container.color
|
Filled autocomplete text field container colormd.comp.filled-autocomplete.text-field.container.color | #E6E0E9 md.comp.filled-autocomplete.text-field.container.color
|
Filled autocomplete text field container heightmd.comp.filled-autocomplete.text-field.container.height | 56dp md.comp.filled-autocomplete.text-field.container.height |
Filled autocomplete text field container shapemd.comp.filled-autocomplete.text-field.container.shape | Default: 0dp · Top-left: 4dp · Top-right: 4dp md.comp.filled-autocomplete.text-field.container.shape
|
Label text
| Token | Value |
|---|---|
Filled autocomplete menu list item label text colormd.comp.filled-autocomplete.menu.list-item.label-text.color | #1D1B20 md.comp.filled-autocomplete.menu.list-item.label-text.color
|
Filled autocomplete menu list item label text fontmd.comp.filled-autocomplete.menu.list-item.label-text.font | Roboto md.comp.filled-autocomplete.menu.list-item.label-text.font
|
Filled autocomplete menu list item label text line heightmd.comp.filled-autocomplete.menu.list-item.label-text.line-height | 20pt md.comp.filled-autocomplete.menu.list-item.label-text.line-height
|
Filled autocomplete menu list item label text sizemd.comp.filled-autocomplete.menu.list-item.label-text.size | 14pt md.comp.filled-autocomplete.menu.list-item.label-text.size
|
Filled autocomplete menu list item label text trackingmd.comp.filled-autocomplete.menu.list-item.label-text.tracking | 0.1pt md.comp.filled-autocomplete.menu.list-item.label-text.tracking
|
Filled autocomplete menu list item label text type stylemd.comp.filled-autocomplete.menu.list-item.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.filled-autocomplete.menu.list-item.label-text.type
|
Filled autocomplete menu list item label text weightmd.comp.filled-autocomplete.menu.list-item.label-text.weight | 500 md.comp.filled-autocomplete.menu.list-item.label-text.weight
|
Filled autocomplete text field label text colormd.comp.filled-autocomplete.text-field.label-text.color | #49454F md.comp.filled-autocomplete.text-field.label-text.color
|
Filled autocomplete text field label text fontmd.comp.filled-autocomplete.text-field.label-text.font | Roboto md.comp.filled-autocomplete.text-field.label-text.font
|
Filled autocomplete text field label text line heightmd.comp.filled-autocomplete.text-field.label-text.line-height | 24pt md.comp.filled-autocomplete.text-field.label-text.line-height
|
Filled autocomplete text field label text populated line heightmd.comp.filled-autocomplete.text-field.label-text.populated.line-height | 16pt md.comp.filled-autocomplete.text-field.label-text.populated.line-height
|
Filled autocomplete text field label text populated sizemd.comp.filled-autocomplete.text-field.label-text.populated.size | 12pt md.comp.filled-autocomplete.text-field.label-text.populated.size
|
Filled autocomplete text field label text sizemd.comp.filled-autocomplete.text-field.label-text.size | 16pt md.comp.filled-autocomplete.text-field.label-text.size
|
Filled autocomplete text field label text trackingmd.comp.filled-autocomplete.text-field.label-text.tracking | 0.5pt md.comp.filled-autocomplete.text-field.label-text.tracking
|
Filled autocomplete text field label text type stylemd.comp.filled-autocomplete.text-field.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.filled-autocomplete.text-field.label-text.type
|
Filled autocomplete text field label text weightmd.comp.filled-autocomplete.text-field.label-text.weight | 400 md.comp.filled-autocomplete.text-field.label-text.weight
|
Icon
| Token | Value |
|---|---|
Filled autocomplete menu cascading menu indicator icon colormd.comp.filled-autocomplete.menu.cascading-menu-indicator.icon.color | #49454F md.comp.filled-autocomplete.menu.cascading-menu-indicator.icon.color
|
Filled autocomplete menu cascading menu indicator icon sizemd.comp.filled-autocomplete.menu.cascading-menu-indicator.icon.size | 24dp md.comp.filled-autocomplete.menu.cascading-menu-indicator.icon.size |
Leading icon
| Token | Value |
|---|---|
Filled autocomplete text field leading icon colormd.comp.filled-autocomplete.text-field.leading-icon.color | #49454F md.comp.filled-autocomplete.text-field.leading-icon.color
|
Filled autocomplete text field leading icon sizemd.comp.filled-autocomplete.text-field.leading-icon.size | 20dp md.comp.filled-autocomplete.text-field.leading-icon.size |
Trailing icon
| Token | Value |
|---|---|
Filled autocomplete text field trailing icon colormd.comp.filled-autocomplete.text-field.trailing-icon.color | #49454F md.comp.filled-autocomplete.text-field.trailing-icon.color
|
Filled autocomplete text field trailing icon sizemd.comp.filled-autocomplete.text-field.trailing-icon.size | 24dp md.comp.filled-autocomplete.text-field.trailing-icon.size |
Divider
| Token | Value |
|---|---|
Filled autocomplete menu divider colormd.comp.filled-autocomplete.menu.divider.color | #E7E0EC md.comp.filled-autocomplete.menu.divider.color
|
Filled autocomplete menu divider heightmd.comp.filled-autocomplete.menu.divider.height | 1dp md.comp.filled-autocomplete.menu.divider.height |
Active indicator
| Token | Value |
|---|---|
Filled autocomplete text field active indicator colormd.comp.filled-autocomplete.text-field.active-indicator.color | #49454F md.comp.filled-autocomplete.text-field.active-indicator.color
|
Filled autocomplete text field active indicator heightmd.comp.filled-autocomplete.text-field.active-indicator.height | 1dp md.comp.filled-autocomplete.text-field.active-indicator.height |
Supporting text
| Token | Value |
|---|---|
Filled autocomplete text field supporting text colormd.comp.filled-autocomplete.text-field.supporting-text.color | #49454F md.comp.filled-autocomplete.text-field.supporting-text.color
|
Filled autocomplete text field supporting text fontmd.comp.filled-autocomplete.text-field.supporting-text.font | Roboto md.comp.filled-autocomplete.text-field.supporting-text.font
|
Filled autocomplete text field supporting text line heightmd.comp.filled-autocomplete.text-field.supporting-text.line-height | 16pt md.comp.filled-autocomplete.text-field.supporting-text.line-height
|
Filled autocomplete text field supporting text sizemd.comp.filled-autocomplete.text-field.supporting-text.size | 12pt md.comp.filled-autocomplete.text-field.supporting-text.size
|
Filled autocomplete text field supporting text trackingmd.comp.filled-autocomplete.text-field.supporting-text.tracking | 0.4pt md.comp.filled-autocomplete.text-field.supporting-text.tracking
|
Filled autocomplete text field supporting text type stylemd.comp.filled-autocomplete.text-field.supporting-text.type | Roboto · 12pt · weight 400 · line height 16pt · tracking 0.4pt md.comp.filled-autocomplete.text-field.supporting-text.type
|
Filled autocomplete text field supporting text weightmd.comp.filled-autocomplete.text-field.supporting-text.weight | 400 md.comp.filled-autocomplete.text-field.supporting-text.weight
|
Input text
| Token | Value |
|---|---|
Filled autocomplete text field input text colormd.comp.filled-autocomplete.text-field.input-text.color | #1D1B20 md.comp.filled-autocomplete.text-field.input-text.color
|
Filled autocomplete text field input text fontmd.comp.filled-autocomplete.text-field.input-text.font | Roboto md.comp.filled-autocomplete.text-field.input-text.font
|
Filled autocomplete text field input text line heightmd.comp.filled-autocomplete.text-field.input-text.line-height | 24pt md.comp.filled-autocomplete.text-field.input-text.line-height
|
Filled autocomplete text field input text sizemd.comp.filled-autocomplete.text-field.input-text.size | 16pt md.comp.filled-autocomplete.text-field.input-text.size
|
Filled autocomplete text field input text trackingmd.comp.filled-autocomplete.text-field.input-text.tracking | 0.5pt md.comp.filled-autocomplete.text-field.input-text.tracking
|
Filled autocomplete text field input text type stylmd.comp.filled-autocomplete.text-field.input-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.filled-autocomplete.text-field.input-text.type
|
Filled autocomplete text field input text weightmd.comp.filled-autocomplete.text-field.input-text.weight | 400 md.comp.filled-autocomplete.text-field.input-text.weight
|
Caret
| Token | Value |
|---|---|
Filled autocomplete text field caret colormd.comp.filled-autocomplete.text-field.caret.color | #6750A4 md.comp.filled-autocomplete.text-field.caret.color
|
Disabled
Container
| Token | Value |
|---|---|
Filled autocomplete text field disabled container colormd.comp.filled-autocomplete.text-field.disabled.container.color | #1D1B20 md.comp.filled-autocomplete.text-field.disabled.container.color
|
Filled autocomplete text field disabled container opacitymd.comp.filled-autocomplete.text-field.disabled.container.opacity | 4% md.comp.filled-autocomplete.text-field.disabled.container.opacity |
Label text
| Token | Value |
|---|---|
Filled autocomplete text field disabled label text colormd.comp.filled-autocomplete.text-field.disabled.label-text.color | #1D1B20 md.comp.filled-autocomplete.text-field.disabled.label-text.color
|
Filled autocomplete text field disabled label text opacitymd.comp.filled-autocomplete.text-field.disabled.label-text.opacity | 38% md.comp.filled-autocomplete.text-field.disabled.label-text.opacity |
Leading icon
| Token | Value |
|---|---|
Filled autocomplete text field disabled leading icon colormd.comp.filled-autocomplete.text-field.disabled.leading-icon.color | #1D1B20 md.comp.filled-autocomplete.text-field.disabled.leading-icon.color
|
Filled autocomplete text field disabled leading icon opacitymd.comp.filled-autocomplete.text-field.disabled.leading-icon.opacity | 38% md.comp.filled-autocomplete.text-field.disabled.leading-icon.opacity |
Trailing icon
| Token | Value |
|---|---|
Filled autocomplete text field disabled trailing icon colormd.comp.filled-autocomplete.text-field.disabled.trailing-icon.color | #1D1B20 md.comp.filled-autocomplete.text-field.disabled.trailing-icon.color
|
Filled autocomplete text field disabled trailing icon opacitymd.comp.filled-autocomplete.text-field.disabled.trailing-icon.opacity | 38% md.comp.filled-autocomplete.text-field.disabled.trailing-icon.opacity |
Supporting text
| Token | Value |
|---|---|
Filled autocomplete text field disabled supporting text colormd.comp.filled-autocomplete.text-field.disabled.supporting-text.color | #1D1B20 md.comp.filled-autocomplete.text-field.disabled.supporting-text.color
|
Filled autocomplete text field disabled supporting text opacitymd.comp.filled-autocomplete.text-field.disabled.supporting-text.opacity | 38% md.comp.filled-autocomplete.text-field.disabled.supporting-text.opacity |
Input text
| Token | Value |
|---|---|
Filled autocomplete text field disabled input text colormd.comp.filled-autocomplete.text-field.disabled.input-text.color | #1D1B20 md.comp.filled-autocomplete.text-field.disabled.input-text.color
|
Filled autocomplete text field disabled input text opacitymd.comp.filled-autocomplete.text-field.disabled.input-text.opacity | 38% md.comp.filled-autocomplete.text-field.disabled.input-text.opacity |
Active indicator
| Token | Value |
|---|---|
Filled autocomplete text field disabled active indicator colormd.comp.filled-autocomplete.text-field.disabled.active-indicator.color | #1D1B20 md.comp.filled-autocomplete.text-field.disabled.active-indicator.color
|
Filled autocomplete text field disabled active indicator heightmd.comp.filled-autocomplete.text-field.disabled.active-indicator.height | 1dp md.comp.filled-autocomplete.text-field.disabled.active-indicator.height |
Filled autocomplete text field disabled active indicator opacitymd.comp.filled-autocomplete.text-field.disabled.active-indicator.opacity | 38% md.comp.filled-autocomplete.text-field.disabled.active-indicator.opacity |
Hovered
Label text
| Token | Value |
|---|---|
Filled autocomplete text field hover label text colormd.comp.filled-autocomplete.text-field.hover.label-text.color | #49454F md.comp.filled-autocomplete.text-field.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Filled autocomplete text field hover state layer colormd.comp.filled-autocomplete.text-field.hover.state-layer.color | #1D1B20 md.comp.filled-autocomplete.text-field.hover.state-layer.color
|
Filled autocomplete text field hover state layer opacitymd.comp.filled-autocomplete.text-field.hover.state-layer.opacity | 8% md.comp.filled-autocomplete.text-field.hover.state-layer.opacity
|
Leading icon
| Token | Value |
|---|---|
Filled autocomplete text field hover leading icon colormd.comp.filled-autocomplete.text-field.hover.leading-icon.color | #49454F md.comp.filled-autocomplete.text-field.hover.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Filled autocomplete text field hover trailing icon colormd.comp.filled-autocomplete.text-field.hover.trailing-icon.color | #49454F md.comp.filled-autocomplete.text-field.hover.trailing-icon.color
|
Input text
| Token | Value |
|---|---|
Filled autocomplete text field hover input text colormd.comp.filled-autocomplete.text-field.hover.input-text.color | #1D1B20 md.comp.filled-autocomplete.text-field.hover.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Filled autocomplete text field hover supporting text colormd.comp.filled-autocomplete.text-field.hover.supporting-text.color | #49454F md.comp.filled-autocomplete.text-field.hover.supporting-text.color
|
Active indicator
| Token | Value |
|---|---|
Filled autocomplete text field hover active indicator colormd.comp.filled-autocomplete.text-field.hover.active-indicator.color | #1D1B20 md.comp.filled-autocomplete.text-field.hover.active-indicator.color
|
Filled autocomplete text field hover active indicator heightmd.comp.filled-autocomplete.text-field.hover.active-indicator.height | 1dp md.comp.filled-autocomplete.text-field.hover.active-indicator.height |
Focused
Label text
| Token | Value |
|---|---|
Filled autocomplete text field focus label text colormd.comp.filled-autocomplete.text-field.focus.label-text.color | #6750A4 md.comp.filled-autocomplete.text-field.focus.label-text.color
|
Leading icon
| Token | Value |
|---|---|
Filled autocomplete text field focus leading icon colormd.comp.filled-autocomplete.text-field.focus.leading-icon.color | #49454F md.comp.filled-autocomplete.text-field.focus.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Filled autocomplete text field focus trailing icon colormd.comp.filled-autocomplete.text-field.focus.trailing-icon.color | #49454F md.comp.filled-autocomplete.text-field.focus.trailing-icon.color
|
Input text
| Token | Value |
|---|---|
Filled autocomplete text field focus input text colormd.comp.filled-autocomplete.text-field.focus.input-text.color | #1D1B20 md.comp.filled-autocomplete.text-field.focus.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Filled autocomplete text field focus supporting text colormd.comp.filled-autocomplete.text-field.focus.supporting-text.color | #49454F md.comp.filled-autocomplete.text-field.focus.supporting-text.color
|
Active indicator
| Token | Value |
|---|---|
Filled autocomplete text field focus active indicator colormd.comp.filled-autocomplete.text-field.focus.active-indicator.color | #6750A4 md.comp.filled-autocomplete.text-field.focus.active-indicator.color
|
Filled autocomplete text field focus active indicator heightmd.comp.filled-autocomplete.text-field.focus.active-indicator.height | 2dp md.comp.filled-autocomplete.text-field.focus.active-indicator.height |
Error
| Token | Value |
|---|---|
Filled autocomplete text field error active indicator colormd.comp.filled-autocomplete.text-field.error.active-indicator.color | #B3261E md.comp.filled-autocomplete.text-field.error.active-indicator.color
|
Filled autocomplete text field error input text colormd.comp.filled-autocomplete.text-field.error.input-text.color | #1D1B20 md.comp.filled-autocomplete.text-field.error.input-text.color
|
Filled autocomplete text field error label text colormd.comp.filled-autocomplete.text-field.error.label-text.color | #B3261E md.comp.filled-autocomplete.text-field.error.label-text.color
|
Filled autocomplete text field error leading icon colormd.comp.filled-autocomplete.text-field.error.leading-icon.color | #49454F md.comp.filled-autocomplete.text-field.error.leading-icon.color
|
Filled autocomplete text field error supporting text colormd.comp.filled-autocomplete.text-field.error.supporting-text.color | #B3261E md.comp.filled-autocomplete.text-field.error.supporting-text.color
|
Filled autocomplete text field error trailing icon colormd.comp.filled-autocomplete.text-field.error.trailing-icon.color | #B3261E md.comp.filled-autocomplete.text-field.error.trailing-icon.color
|
Focus
| Token | Value |
|---|---|
Filled autocomplete text field error focus active indicator colormd.comp.filled-autocomplete.text-field.error.focus.active-indicator.color | #B3261E md.comp.filled-autocomplete.text-field.error.focus.active-indicator.color
|
error.Filled focus caret colormd.comp.filled-autocomplete.text-field.error.focus.caret.color | #B3261E md.comp.filled-autocomplete.text-field.error.focus.caret.color
|
Filled autocomplete text field error focus input text colormd.comp.filled-autocomplete.text-field.error.focus.input-text.color | #1D1B20 md.comp.filled-autocomplete.text-field.error.focus.input-text.color
|
Filled autocomplete text field error focus label text colormd.comp.filled-autocomplete.text-field.error.focus.label-text.color | #B3261E md.comp.filled-autocomplete.text-field.error.focus.label-text.color
|
Filled autocomplete text field error focus leading icon colormd.comp.filled-autocomplete.text-field.error.focus.leading-icon.color | #49454F md.comp.filled-autocomplete.text-field.error.focus.leading-icon.color
|
Filled autocomplete text field error focus supporting text colormd.comp.filled-autocomplete.text-field.error.focus.supporting-text.color | #B3261E md.comp.filled-autocomplete.text-field.error.focus.supporting-text.color
|
Filled autocomplete text field error focus trailing icon colormd.comp.filled-autocomplete.text-field.error.focus.trailing-icon.color | #B3261E md.comp.filled-autocomplete.text-field.error.focus.trailing-icon.color
|
Hover
| Token | Value |
|---|---|
Filled autocomplete text field error hover active indicator colormd.comp.filled-autocomplete.text-field.error.hover.active-indicator.color | #8C1D18 md.comp.filled-autocomplete.text-field.error.hover.active-indicator.color
|
Filled autocomplete text field error hover input text colormd.comp.filled-autocomplete.text-field.error.hover.input-text.color | #1D1B20 md.comp.filled-autocomplete.text-field.error.hover.input-text.color
|
Filled autocomplete text field error hover label text colormd.comp.filled-autocomplete.text-field.error.hover.label-text.color | #8C1D18 md.comp.filled-autocomplete.text-field.error.hover.label-text.color
|
Filled autocomplete text field error hover leading icon colormd.comp.filled-autocomplete.text-field.error.hover.leading-icon.color | #49454F md.comp.filled-autocomplete.text-field.error.hover.leading-icon.color
|
Filled autocomplete text field error hover state layer colormd.comp.filled-autocomplete.text-field.error.hover.state-layer.color | #1D1B20 md.comp.filled-autocomplete.text-field.error.hover.state-layer.color
|
Filled autocomplete text field error hover state layer opacitymd.comp.filled-autocomplete.text-field.error.hover.state-layer.opacity | 8% md.comp.filled-autocomplete.text-field.error.hover.state-layer.opacity
|
Filled autocomplete text field error hover supporting text colormd.comp.filled-autocomplete.text-field.error.hover.supporting-text.color | #B3261E md.comp.filled-autocomplete.text-field.error.hover.supporting-text.color
|
Filled autocomplete text field error hover trailing icon colormd.comp.filled-autocomplete.text-field.error.hover.trailing-icon.color | #8C1D18 md.comp.filled-autocomplete.text-field.error.hover.trailing-icon.color
|
Text field - Autocomplete, outlined
Enabled
Container
| Token | Value |
|---|---|
Outlined autocomplete menu container colormd.comp.outlined-autocomplete.menu.container.color | #F3EDF7 md.comp.outlined-autocomplete.menu.container.color
|
Outlined autocomplete menu container elevationmd.comp.outlined-autocomplete.menu.container.elevation | 3dp md.comp.outlined-autocomplete.menu.container.elevation
|
Outlined autocomplete menu container shadow colormd.comp.outlined-autocomplete.menu.container.shadow-color | #000000 md.comp.outlined-autocomplete.menu.container.shadow-color
|
Outlined autocomplete menu container shapemd.comp.outlined-autocomplete.menu.container.shape | 4dp md.comp.outlined-autocomplete.menu.container.shape
|
Outlined autocomplete menu container surface tint layer colormd.comp.outlined-autocomplete.menu.container.surface-tint-layer.color | #6750A4 md.comp.outlined-autocomplete.menu.container.surface-tint-layer.color
|
Outlined autocomplete menu list item container heightmd.comp.outlined-autocomplete.menu.list-item.container.height | 48dp md.comp.outlined-autocomplete.menu.list-item.container.height |
Outlined autocomplete menu list item selected container colormd.comp.outlined-autocomplete.menu.list-item.selected.container.color | #E6E0E9 md.comp.outlined-autocomplete.menu.list-item.selected.container.color
|
Outlined autocomplete text field container colormd.comp.outlined-autocomplete.text-field.container.color | #E6E0E9 md.comp.outlined-autocomplete.text-field.container.color
|
Outlined autocomplete text field container heightmd.comp.outlined-autocomplete.text-field.container.height | 56dp md.comp.outlined-autocomplete.text-field.container.height |
Outlined autocomplete text field container shapemd.comp.outlined-autocomplete.text-field.container.shape | 4dp md.comp.outlined-autocomplete.text-field.container.shape
|
Outlined autocomplete text field outline colormd.comp.outlined-autocomplete.text-field.outline.color | #79747E md.comp.outlined-autocomplete.text-field.outline.color
|
Outlined autocomplete text field outline widthmd.comp.outlined-autocomplete.text-field.outline.width | 1dp md.comp.outlined-autocomplete.text-field.outline.width |
Label text
| Token | Value |
|---|---|
Outlined autocomplete menu list item label text colormd.comp.outlined-autocomplete.menu.list-item.label-text.color | #1D1B20 md.comp.outlined-autocomplete.menu.list-item.label-text.color
|
Outlined autocomplete menu list item label text fontmd.comp.outlined-autocomplete.menu.list-item.label-text.font | Roboto md.comp.outlined-autocomplete.menu.list-item.label-text.font
|
Outlined autocomplete menu list item label text line heightmd.comp.outlined-autocomplete.menu.list-item.label-text.line-height | 20pt md.comp.outlined-autocomplete.menu.list-item.label-text.line-height
|
Outlined autocomplete menu list item label text sizemd.comp.outlined-autocomplete.menu.list-item.label-text.size | 14pt md.comp.outlined-autocomplete.menu.list-item.label-text.size
|
Outlined autocomplete menu list item label text trackingmd.comp.outlined-autocomplete.menu.list-item.label-text.tracking | 0.1pt md.comp.outlined-autocomplete.menu.list-item.label-text.tracking
|
Outlined autocomplete menu list item label text type stylemd.comp.outlined-autocomplete.menu.list-item.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.outlined-autocomplete.menu.list-item.label-text.type
|
Outlined autocomplete menu list item label text weightmd.comp.outlined-autocomplete.menu.list-item.label-text.weight | 500 md.comp.outlined-autocomplete.menu.list-item.label-text.weight
|
Outlined autocomplete text field label text colormd.comp.outlined-autocomplete.text-field.label-text.color | #49454F md.comp.outlined-autocomplete.text-field.label-text.color
|
Outlined autocomplete text field label text fontmd.comp.outlined-autocomplete.text-field.label-text.font | Roboto md.comp.outlined-autocomplete.text-field.label-text.font
|
Outlined autocomplete text field label text line heightmd.comp.outlined-autocomplete.text-field.label-text.line-height | 24pt md.comp.outlined-autocomplete.text-field.label-text.line-height
|
Outlined autocomplete text field label text populated line heightmd.comp.outlined-autocomplete.text-field.label-text.populated.line-height | 16pt md.comp.outlined-autocomplete.text-field.label-text.populated.line-height
|
Outlined autocomplete text field label text populated sizemd.comp.outlined-autocomplete.text-field.label-text.populated.size | 12pt md.comp.outlined-autocomplete.text-field.label-text.populated.size
|
Outlined autocomplete text field label text sizemd.comp.outlined-autocomplete.text-field.label-text.size | 16pt md.comp.outlined-autocomplete.text-field.label-text.size
|
Outlined autocomplete text field label text trackingmd.comp.outlined-autocomplete.text-field.label-text.tracking | 0.5pt md.comp.outlined-autocomplete.text-field.label-text.tracking
|
Outlined autocomplete text field label text type stylemd.comp.outlined-autocomplete.text-field.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.outlined-autocomplete.text-field.label-text.type
|
Outlined autocomplete text field label text weightmd.comp.outlined-autocomplete.text-field.label-text.weight | 400 md.comp.outlined-autocomplete.text-field.label-text.weight
|
Icon
| Token | Value |
|---|---|
Outlined autocomplete menu cascading menu indicator icon colormd.comp.outlined-autocomplete.menu.cascading-menu-indicator.icon.color | #49454F md.comp.outlined-autocomplete.menu.cascading-menu-indicator.icon.color
|
Outlined autocomplete menu cascading menu indicator icon sizemd.comp.outlined-autocomplete.menu.cascading-menu-indicator.icon.size | 24dp md.comp.outlined-autocomplete.menu.cascading-menu-indicator.icon.size |
Leading icon
| Token | Value |
|---|---|
Outlined autocomplete text field leading icon colormd.comp.outlined-autocomplete.text-field.leading-icon.color | #49454F md.comp.outlined-autocomplete.text-field.leading-icon.color
|
Outlined autocomplete text field leading icon sizemd.comp.outlined-autocomplete.text-field.leading-icon.size | 24dp md.comp.outlined-autocomplete.text-field.leading-icon.size |
Trailing icon
| Token | Value |
|---|---|
Outlined autocomplete text field trailing icon colormd.comp.outlined-autocomplete.text-field.trailing-icon.color | #49454F md.comp.outlined-autocomplete.text-field.trailing-icon.color
|
Outlined autocomplete text field trailing icon sizemd.comp.outlined-autocomplete.text-field.trailing-icon.size | 24dp md.comp.outlined-autocomplete.text-field.trailing-icon.size |
Divider
| Token | Value |
|---|---|
Outlined autocomplete menu divider colormd.comp.outlined-autocomplete.menu.divider.color | #E7E0EC md.comp.outlined-autocomplete.menu.divider.color
|
Outlined autocomplete menu divider heightmd.comp.outlined-autocomplete.menu.divider.height | 1dp md.comp.outlined-autocomplete.menu.divider.height |
Supporting text
| Token | Value |
|---|---|
Outlined autocomplete text field supporting text colormd.comp.outlined-autocomplete.text-field.supporting-text.color | #49454F md.comp.outlined-autocomplete.text-field.supporting-text.color
|
Outlined autocomplete text field supporting text fontmd.comp.outlined-autocomplete.text-field.supporting-text.font | Roboto md.comp.outlined-autocomplete.text-field.supporting-text.font
|
Outlined autocomplete text field supporting text line heightmd.comp.outlined-autocomplete.text-field.supporting-text.line-height | 16pt md.comp.outlined-autocomplete.text-field.supporting-text.line-height
|
Outlined autocomplete text field supporting text sizemd.comp.outlined-autocomplete.text-field.supporting-text.size | 12pt md.comp.outlined-autocomplete.text-field.supporting-text.size
|
Outlined autocomplete text field supporting text trackingmd.comp.outlined-autocomplete.text-field.supporting-text.tracking | 0.4pt md.comp.outlined-autocomplete.text-field.supporting-text.tracking
|
Outlined autocomplete text field supporting text type stylemd.comp.outlined-autocomplete.text-field.supporting-text.type | Roboto · 12pt · weight 400 · line height 16pt · tracking 0.4pt md.comp.outlined-autocomplete.text-field.supporting-text.type
|
Outlined autocomplete text field supporting text weightmd.comp.outlined-autocomplete.text-field.supporting-text.weight | 400 md.comp.outlined-autocomplete.text-field.supporting-text.weight
|
Input text
| Token | Value |
|---|---|
Outlined autocomplete text field input text colormd.comp.outlined-autocomplete.text-field.input-text.color | #1D1B20 md.comp.outlined-autocomplete.text-field.input-text.color
|
Outlined autocomplete text field input text fontmd.comp.outlined-autocomplete.text-field.input-text.font | Roboto md.comp.outlined-autocomplete.text-field.input-text.font
|
Outlined autocomplete text field input text line heightmd.comp.outlined-autocomplete.text-field.input-text.line-height | 24pt md.comp.outlined-autocomplete.text-field.input-text.line-height
|
Outlined autocomplete text field input text sizemd.comp.outlined-autocomplete.text-field.input-text.size | 16pt md.comp.outlined-autocomplete.text-field.input-text.size
|
Outlined autocomplete text field input text trackingmd.comp.outlined-autocomplete.text-field.input-text.tracking | 0.5pt md.comp.outlined-autocomplete.text-field.input-text.tracking
|
Outlined autocomplete text field input text type stylemd.comp.outlined-autocomplete.text-field.input-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.outlined-autocomplete.text-field.input-text.type
|
Outlined autocomplete text field input text weightmd.comp.outlined-autocomplete.text-field.input-text.weight | 400 md.comp.outlined-autocomplete.text-field.input-text.weight
|
Caret
| Token | Value |
|---|---|
Outlined autocomplete text field caret colormd.comp.outlined-autocomplete.text-field.caret.color | #6750A4 md.comp.outlined-autocomplete.text-field.caret.color
|
Disabled
Container
| Token | Value |
|---|---|
Outlined autocomplete text field disabled outline colormd.comp.outlined-autocomplete.text-field.disabled.outline.color | #1D1B20 md.comp.outlined-autocomplete.text-field.disabled.outline.color
|
Outlined autocomplete text field disabled outline opacitymd.comp.outlined-autocomplete.text-field.disabled.outline.opacity | 12% md.comp.outlined-autocomplete.text-field.disabled.outline.opacity |
Outlined autocomplete text field disabled outline widthmd.comp.outlined-autocomplete.text-field.disabled.outline.width | 1dp md.comp.outlined-autocomplete.text-field.disabled.outline.width |
Label text
| Token | Value |
|---|---|
Outlined autocomplete text field disabled label text colormd.comp.outlined-autocomplete.text-field.disabled.label-text.color | #1D1B20 md.comp.outlined-autocomplete.text-field.disabled.label-text.color
|
Outlined autocomplete text field disabled label text opacitymd.comp.outlined-autocomplete.text-field.disabled.label-text.opacity | 38% md.comp.outlined-autocomplete.text-field.disabled.label-text.opacity |
Leading icon
| Token | Value |
|---|---|
Outlined autocomplete text field disabled leading icon colormd.comp.outlined-autocomplete.text-field.disabled.leading-icon.color | #1D1B20 md.comp.outlined-autocomplete.text-field.disabled.leading-icon.color
|
Outlined autocomplete text field disabled leading icon opacitymd.comp.outlined-autocomplete.text-field.disabled.leading-icon.opacity | 38% md.comp.outlined-autocomplete.text-field.disabled.leading-icon.opacity |
Trailing icon
| Token | Value |
|---|---|
Outlined autocomplete text field disabled trailing icon colormd.comp.outlined-autocomplete.text-field.disabled.trailing-icon.color | #1D1B20 md.comp.outlined-autocomplete.text-field.disabled.trailing-icon.color
|
Outlined autocomplete text field disabled trailing icon opacitymd.comp.outlined-autocomplete.text-field.disabled.trailing-icon.opacity | 38% md.comp.outlined-autocomplete.text-field.disabled.trailing-icon.opacity |
Supporting text
| Token | Value |
|---|---|
Outlined autocomplete text field disabled supporting text colormd.comp.outlined-autocomplete.text-field.disabled.supporting-text.color | #1D1B20 md.comp.outlined-autocomplete.text-field.disabled.supporting-text.color
|
Outlined autocomplete text field disabled supporting text opacitymd.comp.outlined-autocomplete.text-field.disabled.supporting-text.opacity | 38% md.comp.outlined-autocomplete.text-field.disabled.supporting-text.opacity |
Input text
| Token | Value |
|---|---|
Outlined autocomplete text field disabled input text colormd.comp.outlined-autocomplete.text-field.disabled.input-text.color | #1D1B20 md.comp.outlined-autocomplete.text-field.disabled.input-text.color
|
Outlined autocomplete text field disabled input text opacitymd.comp.outlined-autocomplete.text-field.disabled.input-text.opacity | 38% md.comp.outlined-autocomplete.text-field.disabled.input-text.opacity |
Hovered
Container
| Token | Value |
|---|---|
Outlined autocomplete text field hover outline colormd.comp.outlined-autocomplete.text-field.hover.outline.color | #1D1B20 md.comp.outlined-autocomplete.text-field.hover.outline.color
|
Outlined autocomplete text field hover outline widthmd.comp.outlined-autocomplete.text-field.hover.outline.width | 1dp md.comp.outlined-autocomplete.text-field.hover.outline.width |
Label text
| Token | Value |
|---|---|
Outlined autocomplete text field hover label text colormd.comp.outlined-autocomplete.text-field.hover.label-text.color | #49454F md.comp.outlined-autocomplete.text-field.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Outlined autocomplete text field hover state layer colormd.comp.outlined-autocomplete.text-field.hover.state-layer.color | #1D1B20 md.comp.outlined-autocomplete.text-field.hover.state-layer.color
|
Outlined autocomplete text field hover state layer opacitymd.comp.outlined-autocomplete.text-field.hover.state-layer.opacity | 8% md.comp.outlined-autocomplete.text-field.hover.state-layer.opacity
|
Leading icon
| Token | Value |
|---|---|
Outlined autocomplete text field hover leading icon colormd.comp.outlined-autocomplete.text-field.hover.leading-icon.color | #49454F md.comp.outlined-autocomplete.text-field.hover.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Outlined autocomplete text field hover trailing icon colormd.comp.outlined-autocomplete.text-field.hover.trailing-icon.color | #49454F md.comp.outlined-autocomplete.text-field.hover.trailing-icon.color
|
Input text
| Token | Value |
|---|---|
Outlined autocomplete text field hover input text colormd.comp.outlined-autocomplete.text-field.hover.input-text.color | #1D1B20 md.comp.outlined-autocomplete.text-field.hover.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Outlined autocomplete text field hover supporting text colormd.comp.outlined-autocomplete.text-field.hover.supporting-text.color | #49454F md.comp.outlined-autocomplete.text-field.hover.supporting-text.color
|
Focused
Container
| Token | Value |
|---|---|
Outlined autocomplete text field focus outline colormd.comp.outlined-autocomplete.text-field.focus.outline.color | #6750A4 md.comp.outlined-autocomplete.text-field.focus.outline.color
|
Outlined autocomplete text field focus outline widthmd.comp.outlined-autocomplete.text-field.focus.outline.width | 2dp md.comp.outlined-autocomplete.text-field.focus.outline.width |
Label text
| Token | Value |
|---|---|
Outlined autocomplete text field focus label text colormd.comp.outlined-autocomplete.text-field.focus.label-text.color | #6750A4 md.comp.outlined-autocomplete.text-field.focus.label-text.color
|
Leading icon
| Token | Value |
|---|---|
Outlined autocomplete text field focus leading icon colormd.comp.outlined-autocomplete.text-field.focus.leading-icon.color | #49454F md.comp.outlined-autocomplete.text-field.focus.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Outlined autocomplete text field focus trailing icon colormd.comp.outlined-autocomplete.text-field.focus.trailing-icon.color | #49454F md.comp.outlined-autocomplete.text-field.focus.trailing-icon.color
|
Input text
| Token | Value |
|---|---|
Outlined autocomplete text field focus input text colormd.comp.outlined-autocomplete.text-field.focus.input-text.color | #1D1B20 md.comp.outlined-autocomplete.text-field.focus.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Outlined autocomplete text field focus supporting text colormd.comp.outlined-autocomplete.text-field.focus.supporting-text.color | #49454F md.comp.outlined-autocomplete.text-field.focus.supporting-text.color
|
Error
| Token | Value |
|---|---|
Outlined autocomplete text field error input text colormd.comp.outlined-autocomplete.text-field.error.input-text.color | #1D1B20 md.comp.outlined-autocomplete.text-field.error.input-text.color
|
Outlined autocomplete text field error label text colormd.comp.outlined-autocomplete.text-field.error.label-text.color | #B3261E md.comp.outlined-autocomplete.text-field.error.label-text.color
|
Outlined autocomplete text field error leading icon colormd.comp.outlined-autocomplete.text-field.error.leading-icon.color | #49454F md.comp.outlined-autocomplete.text-field.error.leading-icon.color
|
text field error outline colormd.comp.outlined-autocomplete.text-field.error.outline.color | #B3261E md.comp.outlined-autocomplete.text-field.error.outline.color
|
Outlined autocomplete text field error supporting text colormd.comp.outlined-autocomplete.text-field.error.supporting-text.color | #B3261E md.comp.outlined-autocomplete.text-field.error.supporting-text.color
|
Outlined autocomplete text field error trailing icon colormd.comp.outlined-autocomplete.text-field.error.trailing-icon.color | #B3261E md.comp.outlined-autocomplete.text-field.error.trailing-icon.color
|
Focus
| Token | Value |
|---|---|
Outlined autocomplete text field error focus caret colormd.comp.outlined-autocomplete.text-field.error.focus.caret.color | #B3261E md.comp.outlined-autocomplete.text-field.error.focus.caret.color
|
Outlined autocomplete text field error focus input text colormd.comp.outlined-autocomplete.text-field.error.focus.input-text.color | #1D1B20 md.comp.outlined-autocomplete.text-field.error.focus.input-text.color
|
Outlined autocomplete text field error focus label text colormd.comp.outlined-autocomplete.text-field.error.focus.label-text.color | #B3261E md.comp.outlined-autocomplete.text-field.error.focus.label-text.color
|
Outlined autocomplete text field error focus leading icon colormd.comp.outlined-autocomplete.text-field.error.focus.leading-icon.color | #49454F md.comp.outlined-autocomplete.text-field.error.focus.leading-icon.color
|
Outlined autocomplete text field error focus outline colormd.comp.outlined-autocomplete.text-field.error.focus.outline.color | #B3261E md.comp.outlined-autocomplete.text-field.error.focus.outline.color
|
Outlined autocomplete text field error focus supporting text colormd.comp.outlined-autocomplete.text-field.error.focus.supporting-text.color | #B3261E md.comp.outlined-autocomplete.text-field.error.focus.supporting-text.color
|
Outlinedfield error focus trailing icon colormd.comp.outlined-autocomplete.text-field.error.focus.trailing-icon.color | #B3261E md.comp.outlined-autocomplete.text-field.error.focus.trailing-icon.color
|
Hover
| Token | Value |
|---|---|
Outlined autocomplete text field error hover input text colormd.comp.outlined-autocomplete.text-field.error.hover.input-text.color | #1D1B20 md.comp.outlined-autocomplete.text-field.error.hover.input-text.color
|
Outlined autocomplete text field error hover label text colormd.comp.outlined-autocomplete.text-field.error.hover.label-text.color | #8C1D18 md.comp.outlined-autocomplete.text-field.error.hover.label-text.color
|
Outlined autocomplete text field error hover leading icon colormd.comp.outlined-autocomplete.text-field.error.hover.leading-icon.color | #49454F md.comp.outlined-autocomplete.text-field.error.hover.leading-icon.color
|
Outlined autocomplete text field error hover outline colormd.comp.outlined-autocomplete.text-field.error.hover.outline.color | #8C1D18 md.comp.outlined-autocomplete.text-field.error.hover.outline.color
|
Outlined autocomplete text field error hover state layer colormd.comp.outlined-autocomplete.text-field.error.hover.state-layer.color | #1D1B20 md.comp.outlined-autocomplete.text-field.error.hover.state-layer.color
|
Outlined autocomplete text field error hover state layer opacitymd.comp.outlined-autocomplete.text-field.error.hover.state-layer.opacity | 8% md.comp.outlined-autocomplete.text-field.error.hover.state-layer.opacity
|
Outlined autocomplete text field error hover supporting text colormd.comp.outlined-autocomplete.text-field.error.hover.supporting-text.color | #B3261E md.comp.outlined-autocomplete.text-field.error.hover.supporting-text.color
|
Outlined autocomplete text field error hover trailing icon colormd.comp.outlined-autocomplete.text-field.error.hover.trailing-icon.color | #8C1D18 md.comp.outlined-autocomplete.text-field.error.hover.trailing-icon.color
|
Text field - Select, filled
Enabled
Container
| Token | Value |
|---|---|
Filled select menu container colormd.comp.filled-select.menu.container.color | #F3EDF7 md.comp.filled-select.menu.container.color
|
Filled select menu container elevationmd.comp.filled-select.menu.container.elevation | 3dp md.comp.filled-select.menu.container.elevation
|
Filled select menu container shadow colormd.comp.filled-select.menu.container.shadow-color | #000000 md.comp.filled-select.menu.container.shadow-color
|
Filled select menu container shapemd.comp.filled-select.menu.container.shape | 4dp md.comp.filled-select.menu.container.shape
|
Filled select menu container surface tint layer colormd.comp.filled-select.menu.container.surface-tint-layer.color | #6750A4 md.comp.filled-select.menu.container.surface-tint-layer.color
|
Filled select menu list item container heightmd.comp.filled-select.menu.list-item.container.height | 48dp md.comp.filled-select.menu.list-item.container.height |
Filled select menu list item selected container colormd.comp.filled-select.menu.list-item.selected.container.color | #E6E0E9 md.comp.filled-select.menu.list-item.selected.container.color
|
Filled select text field container colormd.comp.filled-select.text-field.container.color | #E6E0E9 md.comp.filled-select.text-field.container.color
|
Filled select text field container heightmd.comp.filled-select.text-field.container.height | 56dp md.comp.filled-select.text-field.container.height |
Filled select text field container shapemd.comp.filled-select.text-field.container.shape | Default: 0dp · Top-left: 4dp · Top-right: 4dp md.comp.filled-select.text-field.container.shape
|
Label text
| Token | Value |
|---|---|
Filled select menu list item label text colormd.comp.filled-select.menu.list-item.label-text.color | #1D1B20 md.comp.filled-select.menu.list-item.label-text.color
|
Filled select menu list item label text fontmd.comp.filled-select.menu.list-item.label-text.font | Roboto md.comp.filled-select.menu.list-item.label-text.font
|
Filled select menu list item label text line heightmd.comp.filled-select.menu.list-item.label-text.line-height | 20pt md.comp.filled-select.menu.list-item.label-text.line-height
|
Filled select menu list item label text sizemd.comp.filled-select.menu.list-item.label-text.size | 14pt md.comp.filled-select.menu.list-item.label-text.size
|
Filled select menu list item label text trackingmd.comp.filled-select.menu.list-item.label-text.tracking | 0.1pt md.comp.filled-select.menu.list-item.label-text.tracking
|
Filled select menu list item label text type stylemd.comp.filled-select.menu.list-item.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.filled-select.menu.list-item.label-text.type
|
Filled select menu list item label text weightmd.comp.filled-select.menu.list-item.label-text.weight | 500 md.comp.filled-select.menu.list-item.label-text.weight
|
Filled select text field label text colormd.comp.filled-select.text-field.label-text.color | #49454F md.comp.filled-select.text-field.label-text.color
|
Filled select text field label text fontmd.comp.filled-select.text-field.label-text.font | Roboto md.comp.filled-select.text-field.label-text.font
|
Filled select text field label text line heightmd.comp.filled-select.text-field.label-text.line-height | 24pt md.comp.filled-select.text-field.label-text.line-height
|
Filled select text field label text populated line heightmd.comp.filled-select.text-field.label-text.populated.line-height | 16pt md.comp.filled-select.text-field.label-text.populated.line-height
|
Filled select text field label text populated sizemd.comp.filled-select.text-field.label-text.populated.size | 12pt md.comp.filled-select.text-field.label-text.populated.size
|
Filled select text field label text sizemd.comp.filled-select.text-field.label-text.size | 16pt md.comp.filled-select.text-field.label-text.size
|
Filled select text field label text trackingmd.comp.filled-select.text-field.label-text.tracking | 0.5pt md.comp.filled-select.text-field.label-text.tracking
|
Filled select text field label text type stylemd.comp.filled-select.text-field.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.filled-select.text-field.label-text.type
|
Filled select text field label text weightmd.comp.filled-select.text-field.label-text.weight | 400 md.comp.filled-select.text-field.label-text.weight
|
Icon
| Token | Value |
|---|---|
Filled select menu cascading menu indicator icon colormd.comp.filled-select.menu.cascading-menu-indicator.icon.color | #49454F md.comp.filled-select.menu.cascading-menu-indicator.icon.color
|
Filled select menu cascading menu indicator icon sizemd.comp.filled-select.menu.cascading-menu-indicator.icon.size | 24dp md.comp.filled-select.menu.cascading-menu-indicator.icon.size |
Leading icon
| Token | Value |
|---|---|
Filled select menu list item with leading icon leading icon colormd.comp.filled-select.menu.list-item.with-leading-icon.leading-icon.color | #49454F md.comp.filled-select.menu.list-item.with-leading-icon.leading-icon.color
|
Filled select menu list item with leading icon leading icon sizemd.comp.filled-select.menu.list-item.with-leading-icon.leading-icon.size | 24dp md.comp.filled-select.menu.list-item.with-leading-icon.leading-icon.size |
Filled select text field leading icon colormd.comp.filled-select.text-field.leading-icon.color | #49454F md.comp.filled-select.text-field.leading-icon.color
|
Filled select text field leading icon sizemd.comp.filled-select.text-field.leading-icon.size | 24dp md.comp.filled-select.text-field.leading-icon.size |
Trailing icon
| Token | Value |
|---|---|
Filled select menu list item with trailing icon trailing icon colormd.comp.filled-select.menu.list-item.with-trailing-icon.trailing-icon.color | #49454F md.comp.filled-select.menu.list-item.with-trailing-icon.trailing-icon.color
|
Filled select menu list item with trailing icon trailing icon sizemd.comp.filled-select.menu.list-item.with-trailing-icon.trailing-icon.size | 24dp md.comp.filled-select.menu.list-item.with-trailing-icon.trailing-icon.size |
Filled select text field trailing icon colormd.comp.filled-select.text-field.trailing-icon.color | #49454F md.comp.filled-select.text-field.trailing-icon.color
|
Filled select text field trailing icon sizemd.comp.filled-select.text-field.trailing-icon.size | 24dp md.comp.filled-select.text-field.trailing-icon.size |
Divider
| Token | Value |
|---|---|
Filled select menu divider colormd.comp.filled-select.menu.divider.color | #E7E0EC md.comp.filled-select.menu.divider.color
|
Filled select menu divider heightmd.comp.filled-select.menu.divider.height | 1dp md.comp.filled-select.menu.divider.height |
Active indicator
| Token | Value |
|---|---|
Filled select text field active indicator colormd.comp.filled-select.text-field.active-indicator.color | #49454F md.comp.filled-select.text-field.active-indicator.color
|
Filled select text field active indicator heightmd.comp.filled-select.text-field.active-indicator.height | 1dp md.comp.filled-select.text-field.active-indicator.height |
Supporting text
| Token | Value |
|---|---|
Filled select text field supporting text colormd.comp.filled-select.text-field.supporting-text.color | #49454F md.comp.filled-select.text-field.supporting-text.color
|
Filled select text field supporting text fontmd.comp.filled-select.text-field.supporting-text.font | Roboto md.comp.filled-select.text-field.supporting-text.font
|
Filled select text field supporting text line heightmd.comp.filled-select.text-field.supporting-text.line-height | 16pt md.comp.filled-select.text-field.supporting-text.line-height
|
Filled select text field supporting text sizemd.comp.filled-select.text-field.supporting-text.size | 12pt md.comp.filled-select.text-field.supporting-text.size
|
Filled select text field supporting text trackingmd.comp.filled-select.text-field.supporting-text.tracking | 0.4pt md.comp.filled-select.text-field.supporting-text.tracking
|
Filled select text field supporting text type stylemd.comp.filled-select.text-field.supporting-text.type | Roboto · 12pt · weight 400 · line height 16pt · tracking 0.4pt md.comp.filled-select.text-field.supporting-text.type
|
Filled select text field supporting text weightmd.comp.filled-select.text-field.supporting-text.weight | 400 md.comp.filled-select.text-field.supporting-text.weight
|
Input text
| Token | Value |
|---|---|
Filled select text field input text colormd.comp.filled-select.text-field.input-text.color | #1D1B20 md.comp.filled-select.text-field.input-text.color
|
Filled select text field input text fontmd.comp.filled-select.text-field.input-text.font | Roboto md.comp.filled-select.text-field.input-text.font
|
Filled select text field input text line heightmd.comp.filled-select.text-field.input-text.line-height | 24pt md.comp.filled-select.text-field.input-text.line-height
|
Filled select text field input text sizemd.comp.filled-select.text-field.input-text.size | 16pt md.comp.filled-select.text-field.input-text.size
|
Filled select text field input text trackingmd.comp.filled-select.text-field.input-text.tracking | 0.5pt md.comp.filled-select.text-field.input-text.tracking
|
Filled select text field input text type stylemd.comp.filled-select.text-field.input-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.filled-select.text-field.input-text.type
|
Filled select text field input text weightmd.comp.filled-select.text-field.input-text.weight | 400 md.comp.filled-select.text-field.input-text.weight
|
Caret
| Token | Value |
|---|---|
Filled select text field caret colormd.comp.filled-select.text-field.caret.color | #6750A4 md.comp.filled-select.text-field.caret.color
|
Disabled
Container
| Token | Value |
|---|---|
Filled select text field disabled container colormd.comp.filled-select.text-field.disabled.container.color | #1D1B20 md.comp.filled-select.text-field.disabled.container.color
|
Filled select text field disabled container opacitymd.comp.filled-select.text-field.disabled.container.opacity | 4% md.comp.filled-select.text-field.disabled.container.opacity |
Label text
| Token | Value |
|---|---|
Filled select text field disabled label text colormd.comp.filled-select.text-field.disabled.label-text.color | #1D1B20 md.comp.filled-select.text-field.disabled.label-text.color
|
Filled select text field disabled label text opacitymd.comp.filled-select.text-field.disabled.label-text.opacity | 38% md.comp.filled-select.text-field.disabled.label-text.opacity |
Leading icon
| Token | Value |
|---|---|
Filled select text field disabled leading icon colormd.comp.filled-select.text-field.disabled.leading-icon.color | #1D1B20 md.comp.filled-select.text-field.disabled.leading-icon.color
|
Filled select text field disabled leading icon opacitymd.comp.filled-select.text-field.disabled.leading-icon.opacity | 38% md.comp.filled-select.text-field.disabled.leading-icon.opacity |
Trailing icon
| Token | Value |
|---|---|
Filled select text field disabled trailing icon colormd.comp.filled-select.text-field.disabled.trailing-icon.color | #1D1B20 md.comp.filled-select.text-field.disabled.trailing-icon.color
|
Filled select text field disabled trailing icon opacitymd.comp.filled-select.text-field.disabled.trailing-icon.opacity | 38% md.comp.filled-select.text-field.disabled.trailing-icon.opacity |
Supporting text
| Token | Value |
|---|---|
Filled select text field disabled supporting text colormd.comp.filled-select.text-field.disabled.supporting-text.color | #1D1B20 md.comp.filled-select.text-field.disabled.supporting-text.color
|
Filled select text field disabled supporting text opacitymd.comp.filled-select.text-field.disabled.supporting-text.opacity | 38% md.comp.filled-select.text-field.disabled.supporting-text.opacity |
Input text
| Token | Value |
|---|---|
Filled select text field disabled input text colormd.comp.filled-select.text-field.disabled.input-text.color | #1D1B20 md.comp.filled-select.text-field.disabled.input-text.color
|
Filled select text field disabled input text opacitymd.comp.filled-select.text-field.disabled.input-text.opacity | 38% md.comp.filled-select.text-field.disabled.input-text.opacity |
Active indicator
| Token | Value |
|---|---|
Filled select text field disabled active indicator colormd.comp.filled-select.text-field.disabled.active-indicator.color | #1D1B20 md.comp.filled-select.text-field.disabled.active-indicator.color
|
Filled select text field disabled active indicator heightmd.comp.filled-select.text-field.disabled.active-indicator.height | 1dp md.comp.filled-select.text-field.disabled.active-indicator.height |
Filled select text field disabled active indicator opacitymd.comp.filled-select.text-field.disabled.active-indicator.opacity | 38% md.comp.filled-select.text-field.disabled.active-indicator.opacity |
Hovered
Label text
| Token | Value |
|---|---|
Filled select text field hover label text colormd.comp.filled-select.text-field.hover.label-text.color | #1D1B20 md.comp.filled-select.text-field.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Filled select text field hover state layer colormd.comp.filled-select.text-field.hover.state-layer.color | #1D1B20 md.comp.filled-select.text-field.hover.state-layer.color
|
Filled select text field hover state layer opacitymd.comp.filled-select.text-field.hover.state-layer.opacity | 8% md.comp.filled-select.text-field.hover.state-layer.opacity
|
Leading icon
| Token | Value |
|---|---|
Filled select text field hover leading icon colormd.comp.filled-select.text-field.hover.leading-icon.color | #49454F md.comp.filled-select.text-field.hover.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Filled select text field hover trailing icon colormd.comp.filled-select.text-field.hover.trailing-icon.color | #49454F md.comp.filled-select.text-field.hover.trailing-icon.color
|
Input text
| Token | Value |
|---|---|
Filled select text field hover input text colormd.comp.filled-select.text-field.hover.input-text.color | #1D1B20 md.comp.filled-select.text-field.hover.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Filled select text field hover supporting text colormd.comp.filled-select.text-field.hover.supporting-text.color | #49454F md.comp.filled-select.text-field.hover.supporting-text.color
|
Active indicator
| Token | Value |
|---|---|
Filled select text field hover active indicator colormd.comp.filled-select.text-field.hover.active-indicator.color | #1D1B20 md.comp.filled-select.text-field.hover.active-indicator.color
|
Filled select text field hover active indicator heightmd.comp.filled-select.text-field.hover.active-indicator.height | 1dp md.comp.filled-select.text-field.hover.active-indicator.height |
Focused
Label text
| Token | Value |
|---|---|
Filled select text field focus label text colormd.comp.filled-select.text-field.focus.label-text.color | #6750A4 md.comp.filled-select.text-field.focus.label-text.color
|
Leading icon
| Token | Value |
|---|---|
Filled select text field focus leading icon colormd.comp.filled-select.text-field.focus.leading-icon.color | #49454F md.comp.filled-select.text-field.focus.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Filled select text field focus trailing icon colormd.comp.filled-select.text-field.focus.trailing-icon.color | #6750A4 md.comp.filled-select.text-field.focus.trailing-icon.color
|
Input text
| Token | Value |
|---|---|
Filled select text field focus input text colormd.comp.filled-select.text-field.focus.input-text.color | #1D1B20 md.comp.filled-select.text-field.focus.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Filled select text field focus supporting text colormd.comp.filled-select.text-field.focus.supporting-text.color | #49454F md.comp.filled-select.text-field.focus.supporting-text.color
|
Active indicator
| Token | Value |
|---|---|
Filled select text field focus active indicator colormd.comp.filled-select.text-field.focus.active-indicator.color | #6750A4 md.comp.filled-select.text-field.focus.active-indicator.color
|
Filled select text field focus active indicator heightmd.comp.filled-select.text-field.focus.active-indicator.height | 2dp md.comp.filled-select.text-field.focus.active-indicator.height |
Error
| Token | Value |
|---|---|
Filled select text field error active indicator colormd.comp.filled-select.text-field.error.active-indicator.color | #B3261E md.comp.filled-select.text-field.error.active-indicator.color
|
Filled select text field error input text colormd.comp.filled-select.text-field.error.input-text.color | #1D1B20 md.comp.filled-select.text-field.error.input-text.color
|
Filled select text field error label text colormd.comp.filled-select.text-field.error.label-text.color | #B3261E md.comp.filled-select.text-field.error.label-text.color
|
Filled select text field error leading icon colormd.comp.filled-select.text-field.error.leading-icon.color | #49454F md.comp.filled-select.text-field.error.leading-icon.color
|
Filled select text field error supporting text colormd.comp.filled-select.text-field.error.supporting-text.color | #B3261E md.comp.filled-select.text-field.error.supporting-text.color
|
Filled select text field error trailing icon colormd.comp.filled-select.text-field.error.trailing-icon.color | #B3261E md.comp.filled-select.text-field.error.trailing-icon.color
|
Focus
| Token | Value |
|---|---|
Filled select text field error focus active indicator colormd.comp.filled-select.text-field.error.focus.active-indicator.color | #B3261E md.comp.filled-select.text-field.error.focus.active-indicator.color
|
Filled select text field error focus caret colormd.comp.filled-select.text-field.error.focus.caret.color | #B3261E md.comp.filled-select.text-field.error.focus.caret.color
|
Filled select text field error focus input text colormd.comp.filled-select.text-field.error.focus.input-text.color | #1D1B20 md.comp.filled-select.text-field.error.focus.input-text.color
|
Filled select text field error focus label text colormd.comp.filled-select.text-field.error.focus.label-text.color | #B3261E md.comp.filled-select.text-field.error.focus.label-text.color
|
Filled select text field error focus leading icon colormd.comp.filled-select.text-field.error.focus.leading-icon.color | #49454F md.comp.filled-select.text-field.error.focus.leading-icon.color
|
Filled select text field error focus supporting text colormd.comp.filled-select.text-field.error.focus.supporting-text.color | #B3261E md.comp.filled-select.text-field.error.focus.supporting-text.color
|
Filled select text field error focus trailing icon colormd.comp.filled-select.text-field.error.focus.trailing-icon.color | #B3261E md.comp.filled-select.text-field.error.focus.trailing-icon.color
|
Hover
| Token | Value |
|---|---|
Filled select text field error hover active indicator colormd.comp.filled-select.text-field.error.hover.active-indicator.color | #8C1D18 md.comp.filled-select.text-field.error.hover.active-indicator.color
|
Filled select text field error hover input text colormd.comp.filled-select.text-field.error.hover.input-text.color | #1D1B20 md.comp.filled-select.text-field.error.hover.input-text.color
|
Filled select text field error hover label text colormd.comp.filled-select.text-field.error.hover.label-text.color | #8C1D18 md.comp.filled-select.text-field.error.hover.label-text.color
|
Filled select text field error hover leading icon colormd.comp.filled-select.text-field.error.hover.leading-icon.color | #49454F md.comp.filled-select.text-field.error.hover.leading-icon.color
|
Filled select text field error hover state layer colormd.comp.filled-select.text-field.error.hover.state-layer.color | #1D1B20 md.comp.filled-select.text-field.error.hover.state-layer.color
|
Filled select text field error hover state layer opacitymd.comp.filled-select.text-field.error.hover.state-layer.opacity | 8% md.comp.filled-select.text-field.error.hover.state-layer.opacity
|
Filled select text field error hover supporting text colormd.comp.filled-select.text-field.error.hover.supporting-text.color | #B3261E md.comp.filled-select.text-field.error.hover.supporting-text.color
|
Filled select text field error hover trailing icon colormd.comp.filled-select.text-field.error.hover.trailing-icon.color | #8C1D18 md.comp.filled-select.text-field.error.hover.trailing-icon.color
|
Text field - Filled
Enabled
Container
| Token | Value |
|---|---|
Filled text field container colormd.comp.filled-text-field.container.color | #E6E0E9 md.comp.filled-text-field.container.color
|
Filled text field container heightmd.comp.filled-text-field.container.height | 56dp md.comp.filled-text-field.container.height |
Filled text field container shapemd.comp.filled-text-field.container.shape | Default: 0dp · Top-left: 4dp · Top-right: 4dp md.comp.filled-text-field.container.shape
|
Label text
| Token | Value |
|---|---|
Filled text field label text colormd.comp.filled-text-field.label-text.color | #49454F md.comp.filled-text-field.label-text.color
|
Filled text field label text fontmd.comp.filled-text-field.label-text.font | Roboto md.comp.filled-text-field.label-text.font
|
Filled text field label text line heightmd.comp.filled-text-field.label-text.line-height | 24pt md.comp.filled-text-field.label-text.line-height
|
Filled text field label text populated line heightmd.comp.filled-text-field.label-text.populated.line-height | 16pt md.comp.filled-text-field.label-text.populated.line-height
|
Filled text field label text populated sizemd.comp.filled-text-field.label-text.populated.size | 12pt md.comp.filled-text-field.label-text.populated.size
|
Filled text field label text sizemd.comp.filled-text-field.label-text.size | 16pt md.comp.filled-text-field.label-text.size
|
Filled text field label text trackingmd.comp.filled-text-field.label-text.tracking | 0.5pt md.comp.filled-text-field.label-text.tracking
|
Filled text field label text typemd.comp.filled-text-field.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.filled-text-field.label-text.type
|
Filled text field label text weightmd.comp.filled-text-field.label-text.weight | 400 md.comp.filled-text-field.label-text.weight
|
Leading icon
| Token | Value |
|---|---|
Filled text field leading icon colormd.comp.filled-text-field.leading-icon.color | #49454F md.comp.filled-text-field.leading-icon.color
|
Filled text field leading icon sizemd.comp.filled-text-field.leading-icon.size | 24dp md.comp.filled-text-field.leading-icon.size |
Trailing icon
| Token | Value |
|---|---|
Filled text field trailing icon colormd.comp.filled-text-field.trailing-icon.color | #49454F md.comp.filled-text-field.trailing-icon.color
|
Filled text field trailing icon sizemd.comp.filled-text-field.trailing-icon.size | 24dp md.comp.filled-text-field.trailing-icon.size |
Active indicator
| Token | Value |
|---|---|
Filled text field active indicator colormd.comp.filled-text-field.active-indicator.color | #49454F md.comp.filled-text-field.active-indicator.color
|
Filled text field active indicator heightmd.comp.filled-text-field.active-indicator.height | 1dp md.comp.filled-text-field.active-indicator.height |
Supporting text
| Token | Value |
|---|---|
Filled text field supporting text colormd.comp.filled-text-field.supporting-text.color | #49454F md.comp.filled-text-field.supporting-text.color
|
Filled text field supporting text fontmd.comp.filled-text-field.supporting-text.font | Roboto md.comp.filled-text-field.supporting-text.font
|
Filled text field supporting text line heightmd.comp.filled-text-field.supporting-text.line-height | 16pt md.comp.filled-text-field.supporting-text.line-height
|
Filled text field supporting text sizemd.comp.filled-text-field.supporting-text.size | 12pt md.comp.filled-text-field.supporting-text.size
|
Filled text field supporting text trackingmd.comp.filled-text-field.supporting-text.tracking | 0.4pt md.comp.filled-text-field.supporting-text.tracking
|
Filled text field supporting text typemd.comp.filled-text-field.supporting-text.type | Roboto · 12pt · weight 400 · line height 16pt · tracking 0.4pt md.comp.filled-text-field.supporting-text.type
|
Filled text field supporting text weightmd.comp.filled-text-field.supporting-text.weight | 400 md.comp.filled-text-field.supporting-text.weight
|
Input text
| Token | Value |
|---|---|
Filled text field input text colormd.comp.filled-text-field.input-text.color | #1D1B20 md.comp.filled-text-field.input-text.color
|
Filled text field input text fontmd.comp.filled-text-field.input-text.font | Roboto md.comp.filled-text-field.input-text.font
|
Filled text field input text line heightmd.comp.filled-text-field.input-text.line-height | 24pt md.comp.filled-text-field.input-text.line-height
|
Filled text field input text placeholder colormd.comp.filled-text-field.input-text.placeholder.color | #49454F md.comp.filled-text-field.input-text.placeholder.color
|
Filled text field input text prefix colormd.comp.filled-text-field.input-text.prefix.color | #49454F md.comp.filled-text-field.input-text.prefix.color
|
Filled text field input text sizemd.comp.filled-text-field.input-text.size | 16pt md.comp.filled-text-field.input-text.size
|
Filled text field input text suffix colormd.comp.filled-text-field.input-text.suffix.color | #49454F md.comp.filled-text-field.input-text.suffix.color
|
Filled text field input text trackingmd.comp.filled-text-field.input-text.tracking | 0.5pt md.comp.filled-text-field.input-text.tracking
|
Filled text field input text typemd.comp.filled-text-field.input-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.filled-text-field.input-text.type
|
Filled text field input text weightmd.comp.filled-text-field.input-text.weight | 400 md.comp.filled-text-field.input-text.weight
|
Caret
| Token | Value |
|---|---|
Filled text field caret colormd.comp.filled-text-field.caret.color | #6750A4 md.comp.filled-text-field.caret.color
|
Disabled
Container
| Token | Value |
|---|---|
Filled text field disabled container colormd.comp.filled-text-field.disabled.container.color | #1D1B20 md.comp.filled-text-field.disabled.container.color
|
Filled text field disabled container opacitymd.comp.filled-text-field.disabled.container.opacity | 4% md.comp.filled-text-field.disabled.container.opacity |
Label text
| Token | Value |
|---|---|
Filled text field disabled label text colormd.comp.filled-text-field.disabled.label-text.color | #1D1B20 md.comp.filled-text-field.disabled.label-text.color
|
Filled text field disabled label text opacitymd.comp.filled-text-field.disabled.label-text.opacity | 38% md.comp.filled-text-field.disabled.label-text.opacity |
Leading icon
| Token | Value |
|---|---|
Filled text field disabled leading icon colormd.comp.filled-text-field.disabled.leading-icon.color | #1D1B20 md.comp.filled-text-field.disabled.leading-icon.color
|
Filled text field disabled leading icon opacitymd.comp.filled-text-field.disabled.leading-icon.opacity | 38% md.comp.filled-text-field.disabled.leading-icon.opacity |
Trailing icon
| Token | Value |
|---|---|
Filled text field disabled trailing icon colormd.comp.filled-text-field.disabled.trailing-icon.color | #1D1B20 md.comp.filled-text-field.disabled.trailing-icon.color
|
Filled text field disabled trailing icon opacitymd.comp.filled-text-field.disabled.trailing-icon.opacity | 38% md.comp.filled-text-field.disabled.trailing-icon.opacity |
Supporting text
| Token | Value |
|---|---|
Filled text field disabled supporting text colormd.comp.filled-text-field.disabled.supporting-text.color | #1D1B20 md.comp.filled-text-field.disabled.supporting-text.color
|
Filled text field disabled supporting text opacitymd.comp.filled-text-field.disabled.supporting-text.opacity | 38% md.comp.filled-text-field.disabled.supporting-text.opacity |
Input text
| Token | Value |
|---|---|
Filled text field disabled input text colormd.comp.filled-text-field.disabled.input-text.color | #1D1B20 md.comp.filled-text-field.disabled.input-text.color
|
Filled text field disabled input text opacitymd.comp.filled-text-field.disabled.input-text.opacity | 38% md.comp.filled-text-field.disabled.input-text.opacity |
Active indicator
| Token | Value |
|---|---|
Filled text field disabled active indicator colormd.comp.filled-text-field.disabled.active-indicator.color | #1D1B20 md.comp.filled-text-field.disabled.active-indicator.color
|
Filled text field disabled active indicator heightmd.comp.filled-text-field.disabled.active-indicator.height | 1dp md.comp.filled-text-field.disabled.active-indicator.height |
Filled text field disabled active indicator opacitymd.comp.filled-text-field.disabled.active-indicator.opacity | 38% md.comp.filled-text-field.disabled.active-indicator.opacity |
Hovered
Label text
| Token | Value |
|---|---|
Filled text field hover label text colormd.comp.filled-text-field.hover.label-text.color | #49454F md.comp.filled-text-field.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Filled text field hover state layer colormd.comp.filled-text-field.hover.state-layer.color | #1D1B20 md.comp.filled-text-field.hover.state-layer.color
|
Filled text field hover state layer opacitymd.comp.filled-text-field.hover.state-layer.opacity | 8% md.comp.filled-text-field.hover.state-layer.opacity
|
Leading icon
| Token | Value |
|---|---|
Filled text field hover leading icon colormd.comp.filled-text-field.hover.leading-icon.color | #49454F md.comp.filled-text-field.hover.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Filled text field hover trailing icon colormd.comp.filled-text-field.hover.trailing-icon.color | #49454F md.comp.filled-text-field.hover.trailing-icon.color
|
Input text
| Token | Value |
|---|---|
Filled text field hover input text colormd.comp.filled-text-field.hover.input-text.color | #1D1B20 md.comp.filled-text-field.hover.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Filled text field hover supporting text colormd.comp.filled-text-field.hover.supporting-text.color | #49454F md.comp.filled-text-field.hover.supporting-text.color
|
Active indicator
| Token | Value |
|---|---|
Filled text field hover active indicator colormd.comp.filled-text-field.hover.active-indicator.color | #1D1B20 md.comp.filled-text-field.hover.active-indicator.color
|
Filled text field hover active indicator heightmd.comp.filled-text-field.hover.active-indicator.height | 1dp md.comp.filled-text-field.hover.active-indicator.height |
Focused
Label text
| Token | Value |
|---|---|
Filled text field focus label text colormd.comp.filled-text-field.focus.label-text.color | #6750A4 md.comp.filled-text-field.focus.label-text.color
|
Leading icon
| Token | Value |
|---|---|
Filled text field focus leading icon colormd.comp.filled-text-field.focus.leading-icon.color | #49454F md.comp.filled-text-field.focus.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Filled text field focus trailing icon colormd.comp.filled-text-field.focus.trailing-icon.color | #49454F md.comp.filled-text-field.focus.trailing-icon.color
|
Input text
| Token | Value |
|---|---|
Filled text field focus input text colormd.comp.filled-text-field.focus.input-text.color | #1D1B20 md.comp.filled-text-field.focus.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Filled text field focus supporting text colormd.comp.filled-text-field.focus.supporting-text.color | #49454F md.comp.filled-text-field.focus.supporting-text.color
|
Active indicator
| Token | Value |
|---|---|
Filled text field focus active indicator colormd.comp.filled-text-field.focus.active-indicator.color | #6750A4 md.comp.filled-text-field.focus.active-indicator.color
|
Filled text field focus active indicator heightmd.comp.filled-text-field.focus.active-indicator.height | 2dp md.comp.filled-text-field.focus.active-indicator.height |
Filled text field focus active indicator thicknessmd.comp.filled-text-field.focus.active-indicator.thickness | 3dp md.comp.filled-text-field.focus.active-indicator.thickness
|
Error
| Token | Value |
|---|---|
Filled text field error active indicator colormd.comp.filled-text-field.error.active-indicator.color | #B3261E md.comp.filled-text-field.error.active-indicator.color
|
Filled text field error input text colormd.comp.filled-text-field.error.input-text.color | #1D1B20 md.comp.filled-text-field.error.input-text.color
|
Filled text field error label text colormd.comp.filled-text-field.error.label-text.color | #B3261E md.comp.filled-text-field.error.label-text.color
|
Filled text field error leading icon colormd.comp.filled-text-field.error.leading-icon.color | #49454F md.comp.filled-text-field.error.leading-icon.color
|
Filled text field error supporting text colormd.comp.filled-text-field.error.supporting-text.color | #B3261E md.comp.filled-text-field.error.supporting-text.color
|
Filled text field error trailing icon colormd.comp.filled-text-field.error.trailing-icon.color | #B3261E md.comp.filled-text-field.error.trailing-icon.color
|
Focus
| Token | Value |
|---|---|
Filled text field error focus active indicator colormd.comp.filled-text-field.error.focus.active-indicator.color | #B3261E md.comp.filled-text-field.error.focus.active-indicator.color
|
Filled text field error focus caret colormd.comp.filled-text-field.error.focus.caret.color | #B3261E md.comp.filled-text-field.error.focus.caret.color
|
Filled text field error focus input text colormd.comp.filled-text-field.error.focus.input-text.color | #1D1B20 md.comp.filled-text-field.error.focus.input-text.color
|
Filled text field error focus label text colormd.comp.filled-text-field.error.focus.label-text.color | #B3261E md.comp.filled-text-field.error.focus.label-text.color
|
Filled text field error focus leading icon colormd.comp.filled-text-field.error.focus.leading-icon.color | #49454F md.comp.filled-text-field.error.focus.leading-icon.color
|
Filled text field error focus supporting text colormd.comp.filled-text-field.error.focus.supporting-text.color | #B3261E md.comp.filled-text-field.error.focus.supporting-text.color
|
Filled text field error focus trailing icon colormd.comp.filled-text-field.error.focus.trailing-icon.color | #B3261E md.comp.filled-text-field.error.focus.trailing-icon.color
|
Hover
| Token | Value |
|---|---|
Filled text field error hover active indicator colormd.comp.filled-text-field.error.hover.active-indicator.color | #8C1D18 md.comp.filled-text-field.error.hover.active-indicator.color
|
Filled text field error hover input text colormd.comp.filled-text-field.error.hover.input-text.color | #1D1B20 md.comp.filled-text-field.error.hover.input-text.color
|
Filled text field error hover label text colormd.comp.filled-text-field.error.hover.label-text.color | #8C1D18 md.comp.filled-text-field.error.hover.label-text.color
|
Filled text field error hover leading icon colormd.comp.filled-text-field.error.hover.leading-icon.color | #49454F md.comp.filled-text-field.error.hover.leading-icon.color
|
Filled text field error hover state layer colormd.comp.filled-text-field.error.hover.state-layer.color | #1D1B20 md.comp.filled-text-field.error.hover.state-layer.color
|
Filled text field error hover state layer opacitymd.comp.filled-text-field.error.hover.state-layer.opacity | 8% md.comp.filled-text-field.error.hover.state-layer.opacity
|
Filled text field error hover supporting text colormd.comp.filled-text-field.error.hover.supporting-text.color | #B3261E md.comp.filled-text-field.error.hover.supporting-text.color
|
Filled text field error hover trailing icon colormd.comp.filled-text-field.error.hover.trailing-icon.color | #8C1D18 md.comp.filled-text-field.error.hover.trailing-icon.color
|
Text field - Outlined
Enabled
Container
| Token | Value |
|---|---|
Outlined text field container heightmd.comp.outlined-text-field.container.height | 56dp md.comp.outlined-text-field.container.height |
Outlined text field container shapemd.comp.outlined-text-field.container.shape | 4dp md.comp.outlined-text-field.container.shape
|
Outline
| Token | Value |
|---|---|
Outlined text field outline colormd.comp.outlined-text-field.outline.color | #79747E md.comp.outlined-text-field.outline.color
|
Outlined text field outline widthmd.comp.outlined-text-field.outline.width | 1dp md.comp.outlined-text-field.outline.width |
Label text
| Token | Value |
|---|---|
Outlined text field label text colormd.comp.outlined-text-field.label-text.color | #49454F md.comp.outlined-text-field.label-text.color
|
Outlined text field label text fontmd.comp.outlined-text-field.label-text.font | Roboto md.comp.outlined-text-field.label-text.font
|
Outlined text field label text line heightmd.comp.outlined-text-field.label-text.line-height | 24pt md.comp.outlined-text-field.label-text.line-height
|
Outlined text field label text populated line heightmd.comp.outlined-text-field.label-text.populated.line-height | 16pt md.comp.outlined-text-field.label-text.populated.line-height
|
Outlined text field label text populated sizemd.comp.outlined-text-field.label-text.populated.size | 12pt md.comp.outlined-text-field.label-text.populated.size
|
Outlined text field label text sizemd.comp.outlined-text-field.label-text.size | 16pt md.comp.outlined-text-field.label-text.size
|
Outlined text field label text trackingmd.comp.outlined-text-field.label-text.tracking | 0.5pt md.comp.outlined-text-field.label-text.tracking
|
Outlined text field label text typemd.comp.outlined-text-field.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.outlined-text-field.label-text.type
|
Outlined text field label text weightmd.comp.outlined-text-field.label-text.weight | 400 md.comp.outlined-text-field.label-text.weight
|
Leading icon
| Token | Value |
|---|---|
Outlined text field leading icon colormd.comp.outlined-text-field.leading-icon.color | #49454F md.comp.outlined-text-field.leading-icon.color
|
Outlined text field leading icon sizemd.comp.outlined-text-field.leading-icon.size | 24dp md.comp.outlined-text-field.leading-icon.size |
Trailing icon
| Token | Value |
|---|---|
Outlined text field trailing icon colormd.comp.outlined-text-field.trailing-icon.color | #49454F md.comp.outlined-text-field.trailing-icon.color
|
Outlined text field trailing icon sizemd.comp.outlined-text-field.trailing-icon.size | 24dp md.comp.outlined-text-field.trailing-icon.size |
Supporting text
| Token | Value |
|---|---|
Outlined text field supporting text colormd.comp.outlined-text-field.supporting-text.color | #49454F md.comp.outlined-text-field.supporting-text.color
|
Outlined text field supporting text fontmd.comp.outlined-text-field.supporting-text.font | Roboto md.comp.outlined-text-field.supporting-text.font
|
Outlined text field supporting text line heightmd.comp.outlined-text-field.supporting-text.line-height | 16pt md.comp.outlined-text-field.supporting-text.line-height
|
Outlined text field supporting text sizemd.comp.outlined-text-field.supporting-text.size | 12pt md.comp.outlined-text-field.supporting-text.size
|
Outlined text field supporting text trackingmd.comp.outlined-text-field.supporting-text.tracking | 0.4pt md.comp.outlined-text-field.supporting-text.tracking
|
Outlined text field supporting text typemd.comp.outlined-text-field.supporting-text.type | Roboto · 12pt · weight 400 · line height 16pt · tracking 0.4pt md.comp.outlined-text-field.supporting-text.type
|
Outlined text field supporting text weightmd.comp.outlined-text-field.supporting-text.weight | 400 md.comp.outlined-text-field.supporting-text.weight
|
Input text
| Token | Value |
|---|---|
Outlined text field input text colormd.comp.outlined-text-field.input-text.color | #1D1B20 md.comp.outlined-text-field.input-text.color
|
Outlined text field input text fontmd.comp.outlined-text-field.input-text.font | Roboto md.comp.outlined-text-field.input-text.font
|
Outlined text field input text line heightmd.comp.outlined-text-field.input-text.line-height | 24pt md.comp.outlined-text-field.input-text.line-height
|
Outlined text field input text placeholder colormd.comp.outlined-text-field.input-text.placeholder.color | #49454F md.comp.outlined-text-field.input-text.placeholder.color
|
Outlined text field input text prefix colormd.comp.outlined-text-field.input-text.prefix.color | #49454F md.comp.outlined-text-field.input-text.prefix.color
|
Outlined text field input text sizemd.comp.outlined-text-field.input-text.size | 16pt md.comp.outlined-text-field.input-text.size
|
Outlined text field input text suffix colormd.comp.outlined-text-field.input-text.suffix.color | #49454F md.comp.outlined-text-field.input-text.suffix.color
|
Outlined text field input text trackingmd.comp.outlined-text-field.input-text.tracking | 0.5pt md.comp.outlined-text-field.input-text.tracking
|
Outlined text field input text typemd.comp.outlined-text-field.input-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.outlined-text-field.input-text.type
|
Outlined text field input text weightmd.comp.outlined-text-field.input-text.weight | 400 md.comp.outlined-text-field.input-text.weight
|
Caret
| Token | Value |
|---|---|
Outlined text field caret colormd.comp.outlined-text-field.caret.color | #6750A4 md.comp.outlined-text-field.caret.color
|
Outlined text field error focus caret colormd.comp.outlined-text-field.error.focus.caret.color | #B3261E md.comp.outlined-text-field.error.focus.caret.color
|
Disabled
Label text
| Token | Value |
|---|---|
Outlined text field disabled label text colormd.comp.outlined-text-field.disabled.label-text.color | #1D1B20 md.comp.outlined-text-field.disabled.label-text.color
|
Outlined text field disabled label text opacitymd.comp.outlined-text-field.disabled.label-text.opacity | 38% md.comp.outlined-text-field.disabled.label-text.opacity |
Leading icon
| Token | Value |
|---|---|
Outlined text field disabled leading icon colormd.comp.outlined-text-field.disabled.leading-icon.color | #1D1B20 md.comp.outlined-text-field.disabled.leading-icon.color
|
Outlined text field disabled leading icon opacitymd.comp.outlined-text-field.disabled.leading-icon.opacity | 38% md.comp.outlined-text-field.disabled.leading-icon.opacity |
Trailing icon
| Token | Value |
|---|---|
Outlined text field disabled trailing-icon colormd.comp.outlined-text-field.disabled.trailing-icon.color | #1D1B20 md.comp.outlined-text-field.disabled.trailing-icon.color
|
Outlined text field disabled trailing-icon opacitymd.comp.outlined-text-field.disabled.trailing-icon.opacity | 38% md.comp.outlined-text-field.disabled.trailing-icon.opacity |
Outline
| Token | Value |
|---|---|
Outlined text field disabled outline colormd.comp.outlined-text-field.disabled.outline.color | #1D1B20 md.comp.outlined-text-field.disabled.outline.color
|
Outlined text field disabled outline opacitymd.comp.outlined-text-field.disabled.outline.opacity | 12% md.comp.outlined-text-field.disabled.outline.opacity |
Outlined text field disabled outline widthmd.comp.outlined-text-field.disabled.outline.width | 1dp md.comp.outlined-text-field.disabled.outline.width |
Supporting text
| Token | Value |
|---|---|
Outlined text field disabled supporting text colormd.comp.outlined-text-field.disabled.supporting-text.color | #1D1B20 md.comp.outlined-text-field.disabled.supporting-text.color
|
Outlined text field disabled supporting text opacitymd.comp.outlined-text-field.disabled.supporting-text.opacity | 38% md.comp.outlined-text-field.disabled.supporting-text.opacity |
Input text
| Token | Value |
|---|---|
Outlined text field disabled input text colormd.comp.outlined-text-field.disabled.input-text.color | #1D1B20 md.comp.outlined-text-field.disabled.input-text.color
|
Outlined text field disabled input text opacitymd.comp.outlined-text-field.disabled.input-text.opacity | 38% md.comp.outlined-text-field.disabled.input-text.opacity |
Hovered
Label text
| Token | Value |
|---|---|
Outlined text field hover label text colormd.comp.outlined-text-field.hover.label-text.color | #1D1B20 md.comp.outlined-text-field.hover.label-text.color
|
Leading icon
| Token | Value |
|---|---|
Outlined text field hover leading icon colormd.comp.outlined-text-field.hover.leading-icon.color | #49454F md.comp.outlined-text-field.hover.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Outlined text field hover trailing icon colormd.comp.outlined-text-field.hover.trailing-icon.color | #49454F md.comp.outlined-text-field.hover.trailing-icon.color
|
Outline
| Token | Value |
|---|---|
Outlined text field hover outline colormd.comp.outlined-text-field.hover.outline.color | #1D1B20 md.comp.outlined-text-field.hover.outline.color
|
Outlined text field hover outline widthmd.comp.outlined-text-field.hover.outline.width | 1dp md.comp.outlined-text-field.hover.outline.width |
Input text
| Token | Value |
|---|---|
Outlined text field hover input text colormd.comp.outlined-text-field.hover.input-text.color | #1D1B20 md.comp.outlined-text-field.hover.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Outlined text field hover supporting text colormd.comp.outlined-text-field.hover.supporting-text.color | #49454F md.comp.outlined-text-field.hover.supporting-text.color
|
Focused
Label text
| Token | Value |
|---|---|
Outlined text field focus label text colormd.comp.outlined-text-field.focus.label-text.color | #6750A4 md.comp.outlined-text-field.focus.label-text.color
|
Leading icon
| Token | Value |
|---|---|
Outlined text field focus leading icon colormd.comp.outlined-text-field.focus.leading-icon.color | #49454F md.comp.outlined-text-field.focus.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Outlined text field focus trailing icon colormd.comp.outlined-text-field.focus.trailing-icon.color | #49454F md.comp.outlined-text-field.focus.trailing-icon.color
|
Outline
| Token | Value |
|---|---|
Outlined text field focus outline colormd.comp.outlined-text-field.focus.outline.color | #6750A4 md.comp.outlined-text-field.focus.outline.color
|
Outlined text field focus outline widthmd.comp.outlined-text-field.focus.outline.width | 3dp md.comp.outlined-text-field.focus.outline.width |
Input text
| Token | Value |
|---|---|
Outlined text field focus input text colormd.comp.outlined-text-field.focus.input-text.color | #1D1B20 md.comp.outlined-text-field.focus.input-text.color
|
Supporting text
| Token | Value |
|---|---|
Outlined text field focus supporting text colormd.comp.outlined-text-field.focus.supporting-text.color | #49454F md.comp.outlined-text-field.focus.supporting-text.color
|
Focus indicator
| Token | Value |
|---|---|
Outlined text field focus indicator color - errormd.comp.outlined-text-field.error.focus.indicator.outline.color | #B3261E md.comp.outlined-text-field.error.focus.indicator.outline.color
|
Outlined text field focus indicator colormd.comp.outlined-text-field.focus.indicator.outline.color | #625B71 md.comp.outlined-text-field.focus.indicator.outline.color
|
Outlined text field focus indicator thicknessmd.comp.outlined-text-field.focus.indicator.outline.thickness | 3dp md.comp.outlined-text-field.focus.indicator.outline.thickness
|
Error
| Token | Value |
|---|---|
Outlined text field error input text colormd.comp.outlined-text-field.error.input-text.color | #1D1B20 md.comp.outlined-text-field.error.input-text.color
|
Outlined text field error label text colormd.comp.outlined-text-field.error.label-text.color | #B3261E md.comp.outlined-text-field.error.label-text.color
|
Outlined text field error leading icon colormd.comp.outlined-text-field.error.leading-icon.color | #49454F md.comp.outlined-text-field.error.leading-icon.color
|
Outlined text field error outline colormd.comp.outlined-text-field.error.outline.color | #B3261E md.comp.outlined-text-field.error.outline.color
|
Outlined text field error supporting text colormd.comp.outlined-text-field.error.supporting-text.color | #B3261E md.comp.outlined-text-field.error.supporting-text.color
|
Outlined text field error trailing icon colormd.comp.outlined-text-field.error.trailing-icon.color | #B3261E md.comp.outlined-text-field.error.trailing-icon.color
|
Focus
| Token | Value |
|---|---|
Outlined text field error focus input text colormd.comp.outlined-text-field.error.focus.input-text.color | #1D1B20 md.comp.outlined-text-field.error.focus.input-text.color
|
Outlined text field error focus label text colormd.comp.outlined-text-field.error.focus.label-text.color | #B3261E md.comp.outlined-text-field.error.focus.label-text.color
|
Outlined text field error focus leading icon colormd.comp.outlined-text-field.error.focus.leading-icon.color | #49454F md.comp.outlined-text-field.error.focus.leading-icon.color
|
Outlined text field error focus outline colormd.comp.outlined-text-field.error.focus.outline.color | #B3261E md.comp.outlined-text-field.error.focus.outline.color
|
Outlined text field error focus supporting text colormd.comp.outlined-text-field.error.focus.supporting-text.color | #B3261E md.comp.outlined-text-field.error.focus.supporting-text.color
|
Outlined text field error focus trailing icon colormd.comp.outlined-text-field.error.focus.trailing-icon.color | #B3261E md.comp.outlined-text-field.error.focus.trailing-icon.color
|
Hover
| Token | Value |
|---|---|
Outlined text field error hover input text colormd.comp.outlined-text-field.error.hover.input-text.color | #1D1B20 md.comp.outlined-text-field.error.hover.input-text.color
|
Outlined text field error hover label text colormd.comp.outlined-text-field.error.hover.label-text.color | #8C1D18 md.comp.outlined-text-field.error.hover.label-text.color
|
Outlined text field error hover leading icon colormd.comp.outlined-text-field.error.hover.leading-icon.color | #49454F md.comp.outlined-text-field.error.hover.leading-icon.color
|
Outlined text field error hover outline colormd.comp.outlined-text-field.error.hover.outline.color | #8C1D18 md.comp.outlined-text-field.error.hover.outline.color
|
Outlined text field error hover supporting text colormd.comp.outlined-text-field.error.hover.supporting-text.color | #B3261E md.comp.outlined-text-field.error.hover.supporting-text.color
|
Outlined text field error hover trailing icon colormd.comp.outlined-text-field.error.hover.trailing-icon.color | #8C1D18 md.comp.outlined-text-field.error.hover.trailing-icon.color
|