Chips

Chips help people enter information, make selections, filter content, or trigger actions. Use chips to show options for a specific context.

Overview · Specs · Guidelines · Accessibility

Tokens & specs

Select a component variant below to see its elements, attributes, tokens, and values.

Design tokens

Token table

Machine-readable relationship table

Chips tokens · 4 token sets · 316 tokens · live token table · DSDB TOKEN_TABLE.484a63be03b01a17

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

Chip - Assist · md.comp.assist-chip · 51 tokens

For assist chips.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.assist-chip.container.shape	Shape	md.sys.shape.corner.small	Rounded corners 8dp	—
Enabled › Container	md.comp.assist-chip.container.height	Length	—	32dp	—
Enabled › Container	md.comp.assist-chip.flat.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Enabled › Container	md.comp.assist-chip.flat.outline.color	Color	md.sys.color.outline-variant → md.ref.palette.neutral-variant80	#CAC4D0	Dark: #49454F via md.ref.palette.neutral-variant30 Medium contrast: #79747E via md.ref.palette.neutral-variant50 High contrast: #49454F via md.ref.palette.neutral-variant30
Enabled › Container	md.comp.assist-chip.flat.outline.width	Length	—	1dp	—
Enabled › Container	md.comp.assist-chip.elevated.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Enabled › Container	md.comp.assist-chip.elevated.container.color	Color	md.sys.color.surface-container-low → md.ref.palette.neutral96	#F7F2FA	Dark: #1D1B20 via md.ref.palette.neutral10
Enabled › Container	md.comp.assist-chip.elevated.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled › Container	md.comp.assist-chip.container.surface-tint-layer.color (deprecated)	Color	md.sys.color.surface-tint → md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Label text	md.comp.assist-chip.label-text.font	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.assist-chip.label-text.line-height	Line height	md.sys.typescale.label-large.line-height	20pt	—
Enabled › Label text	md.comp.assist-chip.label-text.size	Font size	md.sys.typescale.label-large.size	14pt	—
Enabled › Label text	md.comp.assist-chip.label-text.weight	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500	—
Enabled › Label text	md.comp.assist-chip.label-text.tracking	Font tracking	md.sys.typescale.label-large.tracking	0.1pt	—
Enabled › Label text	md.comp.assist-chip.label-text.type	Typography	composite font names: md.comp.assist-chip.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.assist-chip.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.assist-chip.label-text.size → md.sys.typescale.label-large.size line height: md.comp.assist-chip.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.assist-chip.label-text.tracking → md.sys.typescale.label-large.tracking	Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt	—
Enabled › Label text	md.comp.assist-chip.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Icon	md.comp.assist-chip.with-icon.icon.size	Length	—	18dp	—
Enabled › Icon	md.comp.assist-chip.with-icon.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Disabled › Container	md.comp.assist-chip.flat.disabled.outline.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.assist-chip.flat.disabled.outline.opacity	Opacity	—	0.12	—
Disabled › Container	md.comp.assist-chip.elevated.disabled.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Disabled › Container	md.comp.assist-chip.elevated.disabled.container.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.assist-chip.elevated.disabled.container.opacity	Opacity	—	0.12	—
Disabled › Label text	md.comp.assist-chip.disabled.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Label text	md.comp.assist-chip.disabled.label-text.opacity	Opacity	—	0.38	—
Disabled › Icon	md.comp.assist-chip.with-icon.disabled.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Icon	md.comp.assist-chip.with-icon.disabled.icon.opacity	Opacity	—	0.38	—
Hovered › Container	md.comp.assist-chip.elevated.hover.container.elevation	Elevation	md.sys.elevation.level2	3dp	—
Hovered › Label text	md.comp.assist-chip.hover.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › State layer	md.comp.assist-chip.hover.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › State layer	md.comp.assist-chip.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › Icon	md.comp.assist-chip.with-icon.hover.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Container	md.comp.assist-chip.flat.focus.outline.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › Container	md.comp.assist-chip.elevated.focus.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Focused › Label text	md.comp.assist-chip.focus.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › State layer	md.comp.assist-chip.focus.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › State layer	md.comp.assist-chip.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › Icon	md.comp.assist-chip.with-icon.focus.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Focus indicator	md.comp.assist-chip.focus.indicator.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Focused › Focus indicator	md.comp.assist-chip.focus.indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp	—
Focused › Focus indicator	md.comp.assist-chip.focus.indicator.outline.offset	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
Pressed (ripple) › Container	md.comp.assist-chip.elevated.pressed.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Pressed (ripple) › Label text	md.comp.assist-chip.pressed.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Pressed (ripple) › State layer	md.comp.assist-chip.pressed.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Pressed (ripple) › State layer	md.comp.assist-chip.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed (ripple) › Icon	md.comp.assist-chip.with-icon.pressed.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Dragged › Container	md.comp.assist-chip.dragged.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Dragged › Label text	md.comp.assist-chip.dragged.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Dragged › State layer	md.comp.assist-chip.dragged.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Dragged › State layer	md.comp.assist-chip.dragged.state-layer.opacity	Opacity	md.sys.state.dragged.state-layer-opacity	0.16	—
Dragged › Icon	md.comp.assist-chip.with-icon.dragged.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20

Chip - Filter · md.comp.filter-chip · 107 tokens

For filter chips.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.filter-chip.container.shape	Shape	md.sys.shape.corner.small	Rounded corners 8dp	—
Enabled › Container	md.comp.filter-chip.container.height	Length	—	32dp	—
Enabled › Container	md.comp.filter-chip.container.shadow-color (deprecated)	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled › Container	md.comp.filter-chip.container.surface-tint-layer.color (deprecated)	Color	md.sys.color.surface-tint → md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Container	md.comp.filter-chip.flat.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Enabled › Container	md.comp.filter-chip.flat.unselected.outline.color	Color	md.sys.color.outline-variant → md.ref.palette.neutral-variant80	#CAC4D0	Dark: #49454F via md.ref.palette.neutral-variant30 Medium contrast: #79747E via md.ref.palette.neutral-variant50 High contrast: #49454F via md.ref.palette.neutral-variant30
Enabled › Container	md.comp.filter-chip.flat.unselected.outline.width	Length	—	1dp	—
Enabled › Container	md.comp.filter-chip.flat.selected.container.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
Enabled › Container	md.comp.filter-chip.flat.selected.outline.width	Length	—	0dp	—
Enabled › Container	md.comp.filter-chip.elevated.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Enabled › Container	md.comp.filter-chip.elevated.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled › Container	md.comp.filter-chip.elevated.unselected.container.color	Color	md.sys.color.surface-container-low → md.ref.palette.neutral96	#F7F2FA	Dark: #1D1B20 via md.ref.palette.neutral10
Enabled › Container	md.comp.filter-chip.elevated.selected.container.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
Enabled › Label text	md.comp.filter-chip.label-text.font	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.filter-chip.label-text.line-height	Line height	md.sys.typescale.label-large.line-height	20pt	—
Enabled › Label text	md.comp.filter-chip.label-text.size	Font size	md.sys.typescale.label-large.size	14pt	—
Enabled › Label text	md.comp.filter-chip.label-text.weight	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500	—
Enabled › Label text	md.comp.filter-chip.label-text.tracking	Font tracking	md.sys.typescale.label-large.tracking	0.1pt	—
Enabled › Label text	md.comp.filter-chip.label-text.type	Typography	composite font names: md.comp.filter-chip.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.filter-chip.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.filter-chip.label-text.size → md.sys.typescale.label-large.size line height: md.comp.filter-chip.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.filter-chip.label-text.tracking → md.sys.typescale.label-large.tracking	Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt	—
Enabled › Label text	md.comp.filter-chip.unselected.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Label text	md.comp.filter-chip.selected.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Icon	md.comp.filter-chip.with-icon.icon.size	Length	—	18dp	—
Enabled › Icon	md.comp.filter-chip.with-leading-icon.selected.leading-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Icon	md.comp.filter-chip.with-leading-icon.unselected.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Icon	md.comp.filter-chip.with-trailing-icon.selected.trailing-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Icon	md.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Icon	md.comp.filter-chip.with-icon.unselected.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Icon	md.comp.filter-chip.with-icon.selected.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Icon	md.comp.filter-chip.with-trailing-icon.trailing-icon.unselected.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Icon	md.comp.filter-chip.with-leading-icon.leading-icon.unselected.color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Disabled › Container	md.comp.filter-chip.flat.disabled.unselected.outline.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.filter-chip.flat.disabled.unselected.outline.opacity	Opacity	—	0.12	—
Disabled › Container	md.comp.filter-chip.flat.disabled.selected.container.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.filter-chip.flat.disabled.selected.container.opacity	Opacity	—	0.12	—
Disabled › Container	md.comp.filter-chip.elevated.disabled.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Disabled › Container	md.comp.filter-chip.elevated.disabled.container.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.filter-chip.elevated.disabled.container.opacity	Opacity	—	0.12	—
Disabled › Label text	md.comp.filter-chip.disabled.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Label text	md.comp.filter-chip.disabled.label-text.opacity	Opacity	—	0.38	—
Disabled › Icon	md.comp.filter-chip.with-leading-icon.disabled.leading-icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Icon	md.comp.filter-chip.with-leading-icon.disabled.leading-icon.opacity	Opacity	—	0.38	—
Disabled › Icon	md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Icon	md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.opacity	Opacity	—	0.38	—
Disabled › Icon	md.comp.filter-chip.with-icon.disabled.icon.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Icon	md.comp.filter-chip.with-icon.disabled.icon.opacity (deprecated)	Opacity	—	0.38	—
Focused › Container	md.comp.filter-chip.flat.unselected.focus.outline.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Container	md.comp.filter-chip.elevated.focus.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Focused › Container	md.comp.filter-chip.flat.selected.focus.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Focused › Container	md.comp.filter-chip.flat.unselected.focus.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Focused › Label text	md.comp.filter-chip.unselected.focus.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Label text	md.comp.filter-chip.selected.focus.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › State layer	md.comp.filter-chip.unselected.focus.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › State layer	md.comp.filter-chip.unselected.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › State layer	md.comp.filter-chip.selected.focus.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › State layer	md.comp.filter-chip.selected.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › Icon	md.comp.filter-chip.with-icon.unselected.focus.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Icon	md.comp.filter-chip.with-icon.selected.focus.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › Icon	md.comp.filter-chip.with-leading-icon.selected.focus.leading-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › Icon	md.comp.filter-chip.with-leading-icon.unselected.focus.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Icon	md.comp.filter-chip.with-trailing-icon.selected.focus.trailing-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › Icon	md.comp.filter-chip.with-trailing-icon.unselected.focus.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Focus indicator	md.comp.filter-chip.focus.indicator.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Focused › Focus indicator	md.comp.filter-chip.focus.indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp	—
Focused › Focus indicator	md.comp.filter-chip.focus.indicator.outline.offset	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
Hovered › Container	md.comp.filter-chip.elevated.hover.container.elevation	Elevation	md.sys.elevation.level2	3dp	—
Hovered › Container	md.comp.filter-chip.flat.selected.hover.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Hovered › Container	md.comp.filter-chip.flat.unselected.hover.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Hovered › Label text	md.comp.filter-chip.unselected.hover.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › Label text	md.comp.filter-chip.selected.hover.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered › State layer	md.comp.filter-chip.unselected.hover.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.filter-chip.unselected.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › State layer	md.comp.filter-chip.selected.hover.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered › State layer	md.comp.filter-chip.selected.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › Icon	md.comp.filter-chip.with-icon.unselected.hover.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › Icon	md.comp.filter-chip.with-icon.selected.hover.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered › Icon	md.comp.filter-chip.with-leading-icon.selected.hover.leading-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered › Icon	md.comp.filter-chip.with-leading-icon.unselected.hover.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Hovered › Icon	md.comp.filter-chip.with-trailing-icon.selected.hover.trailing-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered › Icon	md.comp.filter-chip.with-trailing-icon.unselected.hover.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › Container	md.comp.filter-chip.elevated.pressed.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Pressed (ripple) › Container	md.comp.filter-chip.flat.selected.pressed.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Pressed (ripple) › Container	md.comp.filter-chip.flat.unselected.pressed.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Pressed (ripple) › Label text	md.comp.filter-chip.unselected.pressed.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › Label text	md.comp.filter-chip.selected.pressed.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed (ripple) › State layer	md.comp.filter-chip.unselected.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed (ripple) › State layer	md.comp.filter-chip.unselected.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed (ripple) › State layer	md.comp.filter-chip.selected.pressed.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › State layer	md.comp.filter-chip.selected.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed (ripple) › Icon	md.comp.filter-chip.with-icon.unselected.pressed.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › Icon	md.comp.filter-chip.with-icon.selected.pressed.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed (ripple) › Icon	md.comp.filter-chip.with-leading-icon.selected.pressed.leading-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed (ripple) › Icon	md.comp.filter-chip.with-leading-icon.unselected.pressed.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Pressed (ripple) › Icon	md.comp.filter-chip.with-trailing-icon.selected.pressed.trailing-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed (ripple) › Icon	md.comp.filter-chip.with-trailing-icon.unselected.pressed.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › Container	md.comp.filter-chip.dragged.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Dragged › Label text	md.comp.filter-chip.unselected.dragged.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › Label text	md.comp.filter-chip.selected.dragged.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Dragged › State layer	md.comp.filter-chip.unselected.dragged.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › State layer	md.comp.filter-chip.unselected.dragged.state-layer.opacity	Opacity	md.sys.state.dragged.state-layer-opacity	0.16	—
Dragged › State layer	md.comp.filter-chip.selected.dragged.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Dragged › State layer	md.comp.filter-chip.selected.dragged.state-layer.opacity	Opacity	md.sys.state.dragged.state-layer-opacity	0.16	—
Dragged › Icon	md.comp.filter-chip.with-icon.unselected.dragged.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › Icon	md.comp.filter-chip.with-icon.selected.dragged.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Dragged › Icon	md.comp.filter-chip.with-leading-icon.selected.dragged.leading-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Dragged › Icon	md.comp.filter-chip.with-leading-icon.unselected.dragged.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Dragged › Icon	md.comp.filter-chip.with-trailing-icon.selected.dragged.trailing-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Dragged › Icon	md.comp.filter-chip.with-trailing-icon.unselected.dragged.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0

Chip - Input · md.comp.input-chip · 107 tokens

For input chips.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Avatar	md.comp.input-chip.with-avatar.avatar.size	Length	—	24dp	—
Enabled › Avatar	md.comp.input-chip.with-avatar.avatar.shape	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Enabled › Container	md.comp.input-chip.container.shape	Shape	md.sys.shape.corner.small	Rounded corners 8dp	—
Enabled › Container	md.comp.input-chip.container.height	Length	—	32dp	—
Enabled › Container	md.comp.input-chip.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Enabled › Container	md.comp.input-chip.unselected.outline.color	Color	md.sys.color.outline-variant → md.ref.palette.neutral-variant80	#CAC4D0	Dark: #49454F via md.ref.palette.neutral-variant30 Medium contrast: #79747E via md.ref.palette.neutral-variant50 High contrast: #49454F via md.ref.palette.neutral-variant30
Enabled › Container	md.comp.input-chip.unselected.outline.width	Length	—	1dp	—
Enabled › Container	md.comp.input-chip.selected.container.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
Enabled › Container	md.comp.input-chip.selected.outline.width	Length	—	0dp	—
Enabled › Container	md.comp.input-chip.outline.color (deprecated)	Color	md.sys.color.outline → md.ref.palette.neutral-variant50	#79747E	Dark: #938F99 via md.ref.palette.neutral-variant60 Medium contrast: #49454F via md.ref.palette.neutral-variant30 High contrast: #322F37 via md.ref.palette.neutral-variant20
Enabled › Container	md.comp.input-chip.outline.width (deprecated)	Length	—	1dp	—
Enabled › Label text	md.comp.input-chip.label-text.font	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.input-chip.label-text.line-height	Line height	md.sys.typescale.label-large.line-height	20pt	—
Enabled › Label text	md.comp.input-chip.label-text.size	Font size	md.sys.typescale.label-large.size	14pt	—
Enabled › Label text	md.comp.input-chip.label-text.weight	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500	—
Enabled › Label text	md.comp.input-chip.label-text.tracking	Font tracking	md.sys.typescale.label-large.tracking	0.1pt	—
Enabled › Label text	md.comp.input-chip.label-text.type	Typography	composite font names: md.comp.input-chip.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.input-chip.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.input-chip.label-text.size → md.sys.typescale.label-large.size line height: md.comp.input-chip.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.input-chip.label-text.tracking → md.sys.typescale.label-large.tracking	Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt	—
Enabled › Label text	md.comp.input-chip.selected.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Label text	md.comp.input-chip.unselected.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Label text	md.comp.input-chip.label-text.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Leading icon	md.comp.input-chip.with-leading-icon.leading-icon.size	Length	—	18dp	—
Enabled › Leading icon	md.comp.input-chip.with-leading-icon.selected.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Leading icon	md.comp.input-chip.with-leading-icon.unselected.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Leading icon	md.comp.input-chip.with-leading-icon.leading-icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Trailing icon	md.comp.input-chip.with-trailing-icon.trailing-icon.size	Length	—	18dp	—
Enabled › Trailing icon	md.comp.input-chip.with-trailing-icon.selected.trailing-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Trailing icon	md.comp.input-chip.with-trailing-icon.unselected.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Trailing icon	md.comp.input-chip.with-trailing-icon.trailing-icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Disabled › Container	md.comp.input-chip.disabled.unselected.outline.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.input-chip.disabled.unselected.outline.opacity	Opacity	—	0.12	—
Disabled › Container	md.comp.input-chip.disabled.selected.container.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.input-chip.disabled.selected.container.opacity	Opacity	—	0.12	—
Disabled › Container	md.comp.input-chip.disabled.outline.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.input-chip.disabled.outline.opacity (deprecated)	Opacity	—	0.12	—
Disabled › Label text	md.comp.input-chip.disabled.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Label text	md.comp.input-chip.disabled.label-text.opacity	Opacity	—	0.38	—
Disabled › Leading icon	md.comp.input-chip.with-leading-icon.disabled.leading-icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Leading icon	md.comp.input-chip.with-leading-icon.disabled.leading-icon.opacity	Opacity	—	0.38	—
Disabled › Trailing icon	md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Trailing icon	md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.opacity	Opacity	—	0.38	—
Disabled › Avatar	md.comp.input-chip.with-avatar.disabled.avatar.opacity	Opacity	—	0.38	—
Hovered › Label text	md.comp.input-chip.unselected.hover.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › Label text	md.comp.input-chip.selected.hover.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered › Label text	md.comp.input-chip.hover.label-text.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.input-chip.unselected.hover.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.input-chip.unselected.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › State layer	md.comp.input-chip.selected.hover.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered › State layer	md.comp.input-chip.selected.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › State layer	md.comp.input-chip.hover.state-layer.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.input-chip.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › Leading icon	md.comp.input-chip.with-leading-icon.unselected.hover.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Hovered › Leading icon	md.comp.input-chip.with-leading-icon.selected.hover.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Hovered › Leading icon	md.comp.input-chip.with-leading-icon.hover.leading-icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › Trailing icon	md.comp.input-chip.with-trailing-icon.unselected.hover.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › Trailing icon	md.comp.input-chip.with-trailing-icon.selected.hover.trailing-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered › Trailing icon	md.comp.input-chip.with-trailing-icon.hover.trailing-icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Container	md.comp.input-chip.unselected.focus.outline.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Container	md.comp.input-chip.focus.outline.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Label text	md.comp.input-chip.unselected.focus.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Label text	md.comp.input-chip.selected.focus.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › Label text	md.comp.input-chip.focus.label-text.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › State layer	md.comp.input-chip.unselected.focus.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › State layer	md.comp.input-chip.unselected.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › State layer	md.comp.input-chip.selected.focus.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › State layer	md.comp.input-chip.selected.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › State layer	md.comp.input-chip.focus.state-layer.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › State layer	md.comp.input-chip.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › Leading icon	md.comp.input-chip.with-leading-icon.unselected.focus.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Leading icon	md.comp.input-chip.with-leading-icon.selected.focus.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Leading icon	md.comp.input-chip.with-leading-icon.focus.leading-icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Trailing icon	md.comp.input-chip.with-trailing-icon.unselected.focus.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Trailing icon	md.comp.input-chip.with-trailing-icon.selected.focus.trailing-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused › Trailing icon	md.comp.input-chip.with-trailing-icon.focus.trailing-icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Focus indicator	md.comp.input-chip.focus.indicator.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Focused › Focus indicator	md.comp.input-chip.focus.indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp	—
Focused › Focus indicator	md.comp.input-chip.focus.indicator.outline.offset	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
Pressed (ripple) › Label text	md.comp.input-chip.unselected.pressed.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › Label text	md.comp.input-chip.selected.pressed.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed (ripple) › Label text	md.comp.input-chip.pressed.label-text.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › State layer	md.comp.input-chip.unselected.pressed.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › State layer	md.comp.input-chip.unselected.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed (ripple) › State layer	md.comp.input-chip.selected.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed (ripple) › State layer	md.comp.input-chip.selected.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed (ripple) › State layer	md.comp.input-chip.pressed.state-layer.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › State layer	md.comp.input-chip.pressed.state-layer.opacity (deprecated)	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed (ripple) › Leading icon	md.comp.input-chip.with-leading-icon.unselected.pressed.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Pressed (ripple) › Leading icon	md.comp.input-chip.with-leading-icon.selected.pressed.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Pressed (ripple) › Leading icon	md.comp.input-chip.with-leading-icon.pressed.leading-icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › Trailing icon	md.comp.input-chip.with-trailing-icon.unselected.pressed.trailing-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › Trailing icon	md.comp.input-chip.with-trailing-icon.selected.pressed.trailing-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed (ripple) › Trailing icon	md.comp.input-chip.with-trailing-icon.pressed.trailing-icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › Container	md.comp.input-chip.dragged.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Dragged › Label text	md.comp.input-chip.unselected.dragged.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › Label text	md.comp.input-chip.selected.dragged.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Dragged › Label text	md.comp.input-chip.dragged.label-text.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › State layer	md.comp.input-chip.unselected.dragged.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › State layer	md.comp.input-chip.unselected.dragged.state-layer.opacity	Opacity	md.sys.state.dragged.state-layer-opacity	0.16	—
Dragged › State layer	md.comp.input-chip.selected.dragged.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Dragged › State layer	md.comp.input-chip.selected.dragged.state-layer.opacity	Opacity	md.sys.state.dragged.state-layer-opacity	0.16	—
Dragged › State layer	md.comp.input-chip.dragged.state-layer.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › State layer	md.comp.input-chip.dragged.state-layer.opacity (deprecated)	Opacity	md.sys.state.dragged.state-layer-opacity	0.16	—
Dragged › Trailing icon	md.comp.input-chip.with-trailing-icon.unselected.dragged.trailing-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Dragged › Trailing icon	md.comp.input-chip.with-trailing-icon.selected.dragged.trailing-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Dragged › Trailing icon	md.comp.input-chip.with-trailing-icon.dragged.trailing-icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › Leading icon	md.comp.input-chip.with-leading-icon.unselected.dragged.leading-icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › Leading icon	md.comp.input-chip.with-leading-icon.selected.dragged.leading-icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Dragged › Leading icon	md.comp.input-chip.with-leading-icon.dragged.leading-icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0

Chip - Suggestion · md.comp.suggestion-chip · 51 tokens

For suggestion chips.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.suggestion-chip.container.shape	Shape	md.sys.shape.corner.small	Rounded corners 8dp	—
Enabled › Container	md.comp.suggestion-chip.container.height	Length	—	32dp	—
Enabled › Container	md.comp.suggestion-chip.flat.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Enabled › Container	md.comp.suggestion-chip.flat.outline.color	Color	md.sys.color.outline-variant → md.ref.palette.neutral-variant80	#CAC4D0	Dark: #49454F via md.ref.palette.neutral-variant30 Medium contrast: #79747E via md.ref.palette.neutral-variant50 High contrast: #49454F via md.ref.palette.neutral-variant30
Enabled › Container	md.comp.suggestion-chip.flat.outline.width	Length	—	1dp	—
Enabled › Container	md.comp.suggestion-chip.elevated.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Enabled › Container	md.comp.suggestion-chip.elevated.container.color	Color	md.sys.color.surface-container-low → md.ref.palette.neutral96	#F7F2FA	Dark: #1D1B20 via md.ref.palette.neutral10
Enabled › Container	md.comp.suggestion-chip.elevated.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled › Container	md.comp.suggestion-chip.container.surface-tint-layer.color (deprecated)	Color	md.sys.color.surface-tint → md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Icon	md.comp.suggestion-chip.with-leading-icon.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Icon	md.comp.suggestion-chip.with-leading-icon.leading-icon.size	Length	—	18dp	—
Enabled › Label text	md.comp.suggestion-chip.label-text.font	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.suggestion-chip.label-text.line-height	Line height	md.sys.typescale.label-large.line-height	20pt	—
Enabled › Label text	md.comp.suggestion-chip.label-text.size	Font size	md.sys.typescale.label-large.size	14pt	—
Enabled › Label text	md.comp.suggestion-chip.label-text.weight	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500	—
Enabled › Label text	md.comp.suggestion-chip.label-text.tracking	Font tracking	md.sys.typescale.label-large.tracking	0.1pt	—
Enabled › Label text	md.comp.suggestion-chip.label-text.type	Typography	composite font names: md.comp.suggestion-chip.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.suggestion-chip.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.suggestion-chip.label-text.size → md.sys.typescale.label-large.size line height: md.comp.suggestion-chip.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.suggestion-chip.label-text.tracking → md.sys.typescale.label-large.tracking	Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt	—
Enabled › Label text	md.comp.suggestion-chip.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Disabled › Container	md.comp.suggestion-chip.flat.disabled.outline.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.suggestion-chip.flat.disabled.outline.opacity	Opacity	—	0.12	—
Disabled › Container	md.comp.suggestion-chip.elevated.disabled.container.elevation	Elevation	md.sys.elevation.level0	0dp	—
Disabled › Container	md.comp.suggestion-chip.elevated.disabled.container.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Container	md.comp.suggestion-chip.elevated.disabled.container.opacity	Opacity	—	0.12	—
Disabled › Icon	md.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Icon	md.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.opacity	Opacity	—	0.38	—
Disabled › Label text	md.comp.suggestion-chip.disabled.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled › Label text	md.comp.suggestion-chip.disabled.label-text.opacity	Opacity	—	0.38	—
Hovered › Container	md.comp.suggestion-chip.elevated.hover.container.elevation	Elevation	md.sys.elevation.level2	3dp	—
Hovered › Icon	md.comp.suggestion-chip.with-leading-icon.hover.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Hovered › Label text	md.comp.suggestion-chip.hover.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.suggestion-chip.hover.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.suggestion-chip.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Focused › Focus indicator	md.comp.suggestion-chip.focus.indicator.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Focused › Focus indicator	md.comp.suggestion-chip.focus.indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp	—
Focused › Focus indicator	md.comp.suggestion-chip.focus.indicator.outline.offset	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
Focused › Container	md.comp.suggestion-chip.flat.focus.outline.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › Container	md.comp.suggestion-chip.elevated.focus.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Focused › Icon	md.comp.suggestion-chip.with-leading-icon.focus.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Label text	md.comp.suggestion-chip.focus.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › State layer	md.comp.suggestion-chip.focus.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › State layer	md.comp.suggestion-chip.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Pressed (ripple) › Container	md.comp.suggestion-chip.elevated.pressed.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Pressed (ripple) › Icon	md.comp.suggestion-chip.with-leading-icon.pressed.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Pressed (ripple) › Label text	md.comp.suggestion-chip.pressed.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › State layer	md.comp.suggestion-chip.pressed.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › State layer	md.comp.suggestion-chip.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Dragged › Container	md.comp.suggestion-chip.dragged.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Dragged › Icon	md.comp.suggestion-chip.with-leading-icon.dragged.leading-icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Dragged › Label text	md.comp.suggestion-chip.dragged.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › State layer	md.comp.suggestion-chip.dragged.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Dragged › State layer	md.comp.suggestion-chip.dragged.state-layer.opacity	Opacity	md.sys.state.dragged.state-layer-opacity	0.16	—

Assist chip

1. Container 
2. Label text 
3. Leading icon

Assist chip color

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

Assist chip color roles used for light and dark themes:

1. Surface container low (optional)
2. On surface
3. Outline
4. Primary

Assist chip states

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

Selected and unselected assist chip states:

1. Enabled 
2. Disabled 
3. Hovered 
4. Focused 
5. Pressed 
6. Dragged

Assist chip measurements

Assist chip padding and size measurements

Attribute	Value
Height	32dp
Shape	8dp corner radius
Icon size	18dp
Vertical label text alignment	Center-aligned
Horizontal label text alignment	Start-aligned
Left/right padding	16dp
Left/right padding with icon	8dp
Padding between elements	8dp

Filter chip

1. Container 
2. Label text 
3. Leading icon
4. Trailing icon

Filter chip color

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

Filter chip color roles used for light and dark themes:

1. On surface variant
2. On secondary container
3. Secondary container
4. Outline variant
5. Surface container low (optional)

Filter chip states

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

Selected and unselected filter chip states:

1. Enabled 
2. Disabled 
3. Hovered 
4. Focused 
5. Pressed 
6. Dragged

Filter chip measurements

Filter chip padding and size measurements

Attribute	Value
Container height	32dp
Container shape	8dp corner radius
Icon size	18dp
Vertical label text alignment	Center-aligned
Horizontal label text alignment	Start-aligned
Left/right padding	16dp
Left/right padding with icon	8dp
Padding between elements	8dp

Input chip

1. Container 
2. Label text 
3. Trailing icon 
4. Leading icon

Input chip color

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

Input chip color roles used for light and dark themes:

1. On surface variant
2. Surface container low (optional)
3. On surface variant
4. On surface variant
5. Outline variant
6. Primary
7. Secondary container
8. On secondary container
9. On secondary container

Input chip states

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

Selected and unselected input chip states:

1. Enabled 
2. Disabled 
3. Hovered 
4. Focused 
5. Pressed 
6. Dragged

Input chip measurements

Input chip padding and size measurements

Attribute	Value
Container height	32dp
Container shape	8dp corner radius
Icon size	18dp
Avatar shape	12dp corner radius
Avatar size	24dp
Vertical label text alignment	Center-aligned
Horizontal label text alignment	Start-aligned
Left padding for avatar	4dp
Right padding for avatar	8dp
Left/right padding for icon	8dp
Padding between elements	8dp
Target size for close icon	Min 48dp

Suggestion chip

1. Container 
2. Label text

Suggestion chip color

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

Suggestion chip color roles used for light and dark themes:

1. Outline
2. Surface container low (optional)
3. On surface variant

Suggestion chip states

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

Selected and unselected suggestion chip states:

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed
6. Dragged

Suggestion chip measurements

Suggestion chip padding and size measurements

Attribute	Value
Container height	32dp
Container shape	8dp corner radius
Icon size	18dp
Vertical label text alignment	Center-aligned
Horizontal label text alignment	Start-aligned
Left/right padding without icon	16dp
Left/right padding with icon	8dp
Padding between elements	8dp