Material Design 3 input chip tokens
Browse tokens
Enabled
| Token | Value |
|---|---|
Input chip container elevationmd.comp.input-chip.container.elevation |
|
Input chip label text colormd.comp.input-chip.label-text.color |
|
Input chip outline colormd.comp.input-chip.outline.color |
|
Input chip selected container colormd.comp.input-chip.selected.container.color |
|
Input chip selected label text colormd.comp.input-chip.selected.label-text.color |
|
Input chip unselected label text colormd.comp.input-chip.unselected.label-text.color |
|
Input chip unselected outline colormd.comp.input-chip.unselected.outline.color |
|
Disabled
| Token | Value |
|---|---|
Input chip disabled label text colormd.comp.input-chip.disabled.label-text.color |
|
Input chip disabled label text opacitymd.comp.input-chip.disabled.label-text.opacity | 38% |
Input chip disabled outline colormd.comp.input-chip.disabled.outline.color |
|
Input chip disabled outline opacitymd.comp.input-chip.disabled.outline.opacity | 12% |
Input chip disabled selected container colormd.comp.input-chip.disabled.selected.container.color |
|
Input chip disabled selected container opacitymd.comp.input-chip.disabled.selected.container.opacity | 12% |
Input chip disabled unselected outline colormd.comp.input-chip.disabled.unselected.outline.color |
|
Input chip disabled unselected outline opacitymd.comp.input-chip.disabled.unselected.outline.opacity | 12% |
Hovered
| Token | Value |
|---|---|
Input chip hover label text colormd.comp.input-chip.hover.label-text.color |
|
Input chip hover state layer colormd.comp.input-chip.hover.state-layer.color |
|
Input chip hover state layer opacitymd.comp.input-chip.hover.state-layer.opacity |
|
Input chip selected hover label text colormd.comp.input-chip.selected.hover.label-text.color |
|
Input chip selected hover state layer colormd.comp.input-chip.selected.hover.state-layer.color |
|
Input chip selected hover state layer opacitymd.comp.input-chip.selected.hover.state-layer.opacity |
|
Input chip unselected hover label text colormd.comp.input-chip.unselected.hover.label-text.color |
|
Input chip unselected hover state layer colormd.comp.input-chip.unselected.hover.state-layer.color |
|
Input chip unselected hover state layer opacitymd.comp.input-chip.unselected.hover.state-layer.opacity |
|
Focused
| Token | Value |
|---|---|
Input chip focus indicator colormd.comp.input-chip.focus.indicator.color |
|
Input chip focus label text colormd.comp.input-chip.focus.label-text.color |
|
Input chip focus outline colormd.comp.input-chip.focus.outline.color |
|
Input chip focus state layer colormd.comp.input-chip.focus.state-layer.color |
|
Input chip focus state layer opacitymd.comp.input-chip.focus.state-layer.opacity |
|
Input chip selected focus label text colormd.comp.input-chip.selected.focus.label-text.color |
|
Input chip selected focus state layer colormd.comp.input-chip.selected.focus.state-layer.color |
|
Input chip selected focus state layer opacitymd.comp.input-chip.selected.focus.state-layer.opacity |
|
Input chip unselected focus label text colormd.comp.input-chip.unselected.focus.label-text.color |
|
Input chip unselected focus outline colormd.comp.input-chip.unselected.focus.outline.color |
|
Input chip unselected focus state layer colormd.comp.input-chip.unselected.focus.state-layer.color |
|
Input chip unselected focus state layer opacitymd.comp.input-chip.unselected.focus.state-layer.opacity |
|
Pressed
| Token | Value |
|---|---|
Input chip pressed label text colormd.comp.input-chip.pressed.label-text.color |
|
Input chip pressed state layer colormd.comp.input-chip.pressed.state-layer.color |
|
Input chip pressed state layer opacitymd.comp.input-chip.pressed.state-layer.opacity |
|
Input chip selected pressed label text colormd.comp.input-chip.selected.pressed.label-text.color |
|
Input chip selected pressed state layer colormd.comp.input-chip.selected.pressed.state-layer.color |
|
Input chip selected pressed state layer opacitymd.comp.input-chip.selected.pressed.state-layer.opacity |
|
Input chip unselected pressed label text colormd.comp.input-chip.unselected.pressed.label-text.color |
|
Input chip unselected pressed state layer colormd.comp.input-chip.unselected.pressed.state-layer.color |
|
Input chip unselected pressed state layer opacitymd.comp.input-chip.unselected.pressed.state-layer.opacity |
|
Dragged
| Token | Value |
|---|---|
Input chip dragged container elevationmd.comp.input-chip.dragged.container.elevation |
|
Input chip dragged label text colormd.comp.input-chip.dragged.label-text.color |
|
Input chip dragged state layer colormd.comp.input-chip.dragged.state-layer.color |
|
Input chip dragged state layer opacitymd.comp.input-chip.dragged.state-layer.opacity |
|
Input chip selected dragged label text colormd.comp.input-chip.selected.dragged.label-text.color |
|
Input chip selected dragged state layer colormd.comp.input-chip.selected.dragged.state-layer.color |
|
Input chip selected dragged state layer opacitymd.comp.input-chip.selected.dragged.state-layer.opacity |
|
Input chip unselected dragged label text colormd.comp.input-chip.unselected.dragged.label-text.color |
|
Input chip unselected dragged state layer colormd.comp.input-chip.unselected.dragged.state-layer.color |
|
Input chip unselected dragged state layer opacitymd.comp.input-chip.unselected.dragged.state-layer.opacity |
|