Chip

Chips cover assist, suggestion, filter, and input patterns with shared selection, icon, and avatar support.

Chip

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="chip"][data-part="root"] left_clickLMBCopy
<input>	inputconditional	[data-scope="chip"][data-part="input"] left_clickLMBCopy
<span>	avatarconditional	[data-scope="chip"][data-part="avatar"] left_clickLMBCopy
<img>	avatar-image	[data-scope="chip"][data-part="avatar-image"] left_clickLMBCopy
<Icon>	leadingconditional	[data-scope="chip"][data-part="leading"] left_clickLMBCopy
<span>	content	[data-scope="chip"][data-part="content"] left_clickLMBCopy
<span>	label	[data-scope="chip"][data-part="label"] left_clickLMBCopy
<Icon>	trailingconditional	[data-scope="chip"][data-part="trailing"] left_clickLMBCopy

Props

Name	Description	Default	Control
variantOptional	Material 3 chip variant. filterassistinputsuggestion	"filter"	checkfilterassistinputsuggestion
valueOptional	Value used when the chip participates in a selection group model. SelectionGroupValue | undefined	undefined	-
nameOptional	Name forwarded to the native input when used outside a selection group. string | undefined	undefined	-
elevatedOptional	Whether to use the elevated filter chip treatment. boolean | undefined	false
leadingIconOptional	Leading icon shown before the label. string | undefined	undefined
trailingIconOptional	Trailing icon shown after the label. string | undefined	undefined
avatarSrcOptional	Avatar image URL shown by input chips. string | undefined	undefined
selectedIconOptional	Optional selected-state icon used when no leading icon is provided. string | false | undefined	"check"
disabledOptional	Whether the chip is disabled. boolean | undefined	false
ariaLabelOptional	ARIA label forwarded to the native input. string | undefined	undefined	-
modelValueOptional	- boolean | undefined	false

Events1

Name	Type	Description
update:modelValue	[value: boolean]	-

Slots1

Name	Parameters	Description
default	-	Main chip label.

Styling270

Preview

Token	Description
--md-assist-chip-container-heightLayout Fallback2rem	Controls chip container height.
--md-assist-chip-container-shapeShape Fallbackvar(--md-shape-chip)	Controls chip container shape.
--md-assist-chip-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip disabled label text color.
--md-assist-chip-disabled-label-text-opacityDisabled Fallback0.38	Controls chip disabled label text opacity.
--md-assist-chip-elevated-container-colorColor Fallbackvar(--md-sys-color-surface-container-low)	Controls chip elevated container color.
--md-assist-chip-elevated-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls chip elevated container elevation.
--md-assist-chip-elevated-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip elevated disabled container color.
--md-assist-chip-elevated-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls chip elevated disabled container elevation.
--md-assist-chip-elevated-disabled-container-opacityDisabled Fallback0.12	Controls chip elevated disabled container opacity.
--md-assist-chip-elevated-focus-container-elevationFocus Fallbackvar(--md-sys-elevation-level1)	Controls chip elevated focus container elevation.
--md-assist-chip-flat-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls chip flat container elevation.
--md-assist-chip-flat-disabled-outline-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip flat disabled outline color.
--md-assist-chip-flat-disabled-outline-opacityDisabled Fallback0.12	Controls chip flat disabled outline opacity.
--md-assist-chip-flat-focus-outline-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls chip flat focus outline color.
--md-assist-chip-flat-outline-colorColor Fallbackvar(--md-sys-color-outline-variant)	Controls chip flat outline color.
--md-assist-chip-flat-outline-widthLayout Fallback0.0625rem	Controls chip flat outline width.
--md-assist-chip-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls chip focus indicator color.
--md-assist-chip-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls chip focus indicator outline offset.
--md-assist-chip-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls chip focus indicator thickness.
--md-assist-chip-focus-label-text-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls chip focus label text color.
--md-assist-chip-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls chip focus state layer color.
--md-assist-chip-hover-label-text-colorState Fallbackvar(--md-sys-color-on-surface)	Controls chip hover label text color.
--md-assist-chip-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls chip hover state layer color.
--md-assist-chip-label-text-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls chip label text color.
--md-assist-chip-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-surface)	Controls chip pressed label text color.
--md-assist-chip-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls chip pressed state layer color.
--md-assist-chip-with-icon-disabled-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip with icon disabled icon color.
--md-assist-chip-with-icon-disabled-icon-opacityDisabled Fallback0.38	Controls chip with icon disabled icon opacity.
--md-assist-chip-with-icon-focus-icon-colorFocus Fallbackvar(--md-sys-color-primary)	Controls chip with icon focus icon color.
--md-assist-chip-with-icon-hover-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with icon hover icon color.
--md-assist-chip-with-icon-icon-colorColor Fallbackvar(--md-sys-color-primary)	Controls chip with icon icon color.
--md-assist-chip-with-icon-icon-sizeLayout Fallback1.125rem	Controls chip with icon icon size.
--md-assist-chip-with-icon-pressed-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with icon pressed icon color.
--md-chip-assist-elevated-hover-container-elevationElevation Fallbackvar(--md-sys-elevation-level2)	Controls assist elevated hover container elevation.
--md-chip-assist-elevated-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls assist elevated pressed container elevation.
--md-chip-avatar-disabled-opacityDisabled Fallbackvar(--md-input-chip-with-avatar-disabled-avatar-opacity,0.38)	Controls avatar disabled opacity.
--md-chip-avatar-shapeShape Fallbackvar(--md-input-chip-with-avatar-avatar-shape,var(--md-sys-shape-corner-full))	Controls avatar shape.
--md-chip-avatar-sizeLayout Fallbackvar(--md-input-chip-with-avatar-avatar-size,1.5rem)	Controls avatar size.
--md-chip-container-colorColor Fallbacktransparent	Controls container color.
--md-chip-container-elevationElevation Fallbackvar(--md-chip-flat-container-elevation,var(--md-sys-elevation-level0))	Controls container elevation.
--md-chip-container-heightLayout Fallback2rem	Controls container height.
--md-chip-container-shapeShape Fallbackvar(--md-shape-chip)	Controls container shape.
--md-chip-disabled-elevated-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled elevated container color.
--md-chip-disabled-elevated-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls disabled elevated container elevation.
--md-chip-disabled-elevated-container-opacityDisabled Fallback0.12	Controls disabled elevated container opacity.
--md-chip-disabled-flat-outline-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled flat outline color.
--md-chip-disabled-flat-outline-opacityDisabled Fallback0.12	Controls disabled flat outline opacity.
--md-chip-disabled-flat-selected-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled flat selected container color.
--md-chip-disabled-flat-selected-container-opacityDisabled Fallback0.12	Controls disabled flat selected container opacity.
--md-chip-disabled-icon-opacityDisabled Fallback0.38	Controls disabled icon opacity.
--md-chip-disabled-label-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled label color.
--md-chip-disabled-label-opacityDisabled Fallback0.38	Controls disabled label opacity.
--md-chip-disabled-leading-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled leading color.
--md-chip-disabled-trailing-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled trailing color.
--md-chip-elevated-container-colorColor Fallbackvar(--md-sys-color-surface-container-low)	Controls elevated container color.
--md-chip-elevated-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls elevated container elevation.
--md-chip-elevated-focus-container-elevationFocus Fallbackvar(--md-assist-chip-elevated-focus-container-elevation,var(--md-sys-elevation-level1))	Controls elevated focus container elevation.
--md-chip-elevated-hover-container-elevationElevation Fallbackvar(--md-chip-assist-elevated-hover-container-elevation,var(--md-sys-elevation-level2))	Controls elevated hover container elevation.
--md-chip-elevated-pressed-container-elevationElevation Fallbackvar(--md-chip-assist-elevated-pressed-container-elevation,var(--md-sys-elevation-level1))	Controls elevated pressed container elevation.
--md-chip-flat-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls flat container elevation.
--md-chip-flat-focus-container-elevationFocus Fallbackvar(--md-chip-flat-container-elevation,var(--md-sys-elevation-level0))	Controls flat focus container elevation.
--md-chip-flat-focus-outline-colorFocus Fallbackvar(--md-assist-chip-flat-focus-outline-color,var(--md-sys-color-on-surface))	Controls flat focus outline color.
--md-chip-flat-hover-container-elevationElevation Fallbackvar(--md-chip-flat-container-elevation,var(--md-sys-elevation-level0))	Controls flat hover container elevation.
--md-chip-flat-outline-colorColor Fallbackvar(--md-sys-color-outline-variant)	Controls flat outline color.
--md-chip-flat-outline-widthLayout Fallback0.0625rem	Controls flat outline width.
--md-chip-flat-pressed-container-elevationElevation Fallbackvar(--md-chip-flat-container-elevation,var(--md-sys-elevation-level0))	Controls flat pressed container elevation.
--md-chip-flat-selected-focus-container-elevationFocus Fallbackvar(--md-chip-flat-container-elevation,var(--md-sys-elevation-level0))	Controls flat selected focus container elevation.
--md-chip-flat-selected-hover-container-elevationElevation Fallbackvar(--md-chip-flat-container-elevation,var(--md-sys-elevation-level0))	Controls flat selected hover container elevation.
--md-chip-flat-selected-pressed-container-elevationElevation Fallbackvar(--md-chip-flat-container-elevation,var(--md-sys-elevation-level0))	Controls flat selected pressed container elevation.
--md-chip-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls focus indicator color.
--md-chip-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls focus indicator outline offset.
--md-chip-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-chip-focus-label-colorFocus Fallbackvar(--md-chip-label-default-color,var(--md-sys-color-on-surface))	Controls focus label color.
--md-chip-focus-leading-colorFocus Fallbackvar(--md-chip-leading-default-color,currentColor)	Controls focus leading color.
--md-chip-focus-state-layer-colorFocus FallbackcurrentColor	Controls focus state layer color.
--md-chip-focus-trailing-colorFocus Fallbackvar(--md-chip-trailing-default-color,currentColor)	Controls focus trailing color.
--md-chip-hover-label-colorState Fallbackvar(--md-chip-label-default-color,var(--md-sys-color-on-surface))	Controls hover label color.
--md-chip-hover-leading-colorState Fallbackvar(--md-chip-leading-default-color,currentColor)	Controls hover leading color.
--md-chip-hover-state-layer-colorState FallbackcurrentColor	Controls hover state layer color.
--md-chip-hover-trailing-colorState Fallbackvar(--md-chip-trailing-default-color,currentColor)	Controls hover trailing color.
--md-chip-icon-gapLayout Fallback0.5rem	Controls icon gap.
--md-chip-icon-sizeLayout Fallback1.125rem	Controls icon size.
--md-chip-label-colorColor Fallbackvar(--md-chip-label-default-color,var(--md-sys-color-on-surface))	Controls label color.
--md-chip-label-default-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls label default color.
--md-chip-leading-default-colorColor FallbackcurrentColor	Controls leading default color.
--md-chip-leading-icon-colorColor Fallbackvar(--md-chip-leading-default-color,currentColor)	Controls leading icon color.
--md-chip-leading-spaceLayout Fallback1rem	Controls leading space.
--md-chip-outline-colorColor Fallbackvar(--md-chip-flat-outline-color,var(--md-sys-color-outline-variant))	Controls outline color.
--md-chip-outline-widthLayout Fallbackvar(--md-chip-flat-outline-width,0.0625rem)	Controls outline width.
--md-chip-pressed-label-colorState Fallbackvar(--md-chip-label-default-color,var(--md-sys-color-on-surface))	Controls pressed label color.
--md-chip-pressed-leading-colorState Fallbackvar(--md-chip-leading-default-color,currentColor)	Controls pressed leading color.
--md-chip-pressed-state-layer-colorState FallbackcurrentColor	Controls pressed state layer color.
--md-chip-pressed-trailing-colorState Fallbackvar(--md-chip-trailing-default-color,currentColor)	Controls pressed trailing color.
--md-chip-selected-container-colorState Fallbackvar(--md-chip-container-color,transparent)	Controls selected container color.
--md-chip-selected-elevated-container-colorState Fallbackvar(--md-chip-selected-container-color,var(--md-chip-container-color,transparent))	Controls selected elevated container color.
--md-chip-selected-focus-label-colorFocus Fallbackvar(--md-chip-focus-label-color,var(--md-chip-label-default-color,var(--md-sys-color-on-surface)))	Controls selected focus label color.
--md-chip-selected-focus-leading-colorFocus Fallbackvar(--md-chip-focus-leading-color,var(--md-chip-leading-default-color,currentColor))	Controls selected focus leading color.
--md-chip-selected-focus-state-layer-colorFocus Fallbackvar(--md-chip-focus-state-layer-color,currentColor)	Controls selected focus state layer color.
--md-chip-selected-focus-trailing-colorFocus Fallbackvar(--md-chip-focus-trailing-color,var(--md-chip-trailing-default-color,currentColor))	Controls selected focus trailing color.
--md-chip-selected-hover-label-colorState Fallbackvar(--md-chip-hover-label-color,var(--md-chip-label-default-color,var(--md-sys-color-on-surface)))	Controls selected hover label color.
--md-chip-selected-hover-leading-colorState Fallbackvar(--md-chip-hover-leading-color,var(--md-chip-leading-default-color,currentColor))	Controls selected hover leading color.
--md-chip-selected-hover-state-layer-colorState Fallbackvar(--md-chip-hover-state-layer-color,currentColor)	Controls selected hover state layer color.
--md-chip-selected-hover-trailing-colorState Fallbackvar(--md-chip-hover-trailing-color,var(--md-chip-trailing-default-color,currentColor))	Controls selected hover trailing color.
--md-chip-selected-label-colorState Fallbackvar(--md-chip-label-default-color,var(--md-sys-color-on-surface))	Controls selected label color.
--md-chip-selected-leading-colorState Fallbackvar(--md-chip-leading-default-color,currentColor)	Controls selected leading color.
--md-chip-selected-outline-widthState Fallbackvar(--md-chip-flat-outline-width,0.0625rem)	Controls selected outline width.
--md-chip-selected-pressed-label-colorState Fallbackvar(--md-chip-pressed-label-color,var(--md-chip-label-default-color,var(--md-sys-color-on-surface)))	Controls selected pressed label color.
--md-chip-selected-pressed-leading-colorState Fallbackvar(--md-chip-pressed-leading-color,var(--md-chip-leading-default-color,currentColor))	Controls selected pressed leading color.
--md-chip-selected-pressed-state-layer-colorState Fallbackvar(--md-chip-pressed-state-layer-color,currentColor)	Controls selected pressed state layer color.
--md-chip-selected-pressed-trailing-colorState Fallbackvar(--md-chip-pressed-trailing-color,var(--md-chip-trailing-default-color,currentColor))	Controls selected pressed trailing color.
--md-chip-selected-trailing-colorState Fallbackvar(--md-chip-trailing-default-color,currentColor)	Controls selected trailing color.
--md-chip-suggestion-elevated-hover-container-elevationElevation Fallbackvar(--md-sys-elevation-level2)	Controls suggestion elevated hover container elevation.
--md-chip-suggestion-elevated-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls suggestion elevated pressed container elevation.
--md-chip-trailing-default-colorColor FallbackcurrentColor	Controls trailing default color.
--md-chip-trailing-icon-colorColor Fallbackvar(--md-chip-trailing-default-color,currentColor)	Controls trailing icon color.
--md-chip-trailing-spaceLayout Fallback1rem	Controls trailing space.
--md-chip-with-icon-side-spaceLayout Fallback0.5rem	Controls with icon side space.
--md-filter-chip-container-heightLayout Fallback2rem	Controls chip container height.
--md-filter-chip-container-shapeShape Fallbackvar(--md-shape-chip)	Controls chip container shape.
--md-filter-chip-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip disabled label text color.
--md-filter-chip-disabled-label-text-opacityDisabled Fallback0.38	Controls chip disabled label text opacity.
--md-filter-chip-elevated-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls chip elevated container elevation.
--md-filter-chip-elevated-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip elevated disabled container color.
--md-filter-chip-elevated-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls chip elevated disabled container elevation.
--md-filter-chip-elevated-disabled-container-opacityDisabled Fallback0.12	Controls chip elevated disabled container opacity.
--md-filter-chip-elevated-focus-container-elevationFocus Fallbackvar(--md-sys-elevation-level1)	Controls chip elevated focus container elevation.
--md-filter-chip-elevated-hover-container-elevationElevation Fallbackvar(--md-sys-elevation-level2)	Controls chip elevated hover container elevation.
--md-filter-chip-elevated-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls chip elevated pressed container elevation.
--md-filter-chip-elevated-selected-container-colorState Fallbackvar(--md-sys-color-secondary-container)	Controls chip elevated selected container color.
--md-filter-chip-elevated-unselected-container-colorState Fallbackvar(--md-sys-color-surface-container-low)	Controls chip elevated unselected container color.
--md-filter-chip-flat-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls chip flat container elevation.
--md-filter-chip-flat-disabled-selected-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip flat disabled selected container color.
--md-filter-chip-flat-disabled-selected-container-opacityDisabled Fallback0.12	Controls chip flat disabled selected container opacity.
--md-filter-chip-flat-disabled-unselected-outline-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip flat disabled unselected outline color.
--md-filter-chip-flat-disabled-unselected-outline-opacityDisabled Fallback0.12	Controls chip flat disabled unselected outline opacity.
--md-filter-chip-flat-selected-container-colorState Fallbackvar(--md-sys-color-secondary-container)	Controls chip flat selected container color.
--md-filter-chip-flat-selected-focus-container-elevationFocus Fallbackvar(--md-sys-elevation-level0)	Controls chip flat selected focus container elevation.
--md-filter-chip-flat-selected-hover-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls chip flat selected hover container elevation.
--md-filter-chip-flat-selected-outline-widthState Fallback0	Controls chip flat selected outline width.
--md-filter-chip-flat-selected-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls chip flat selected pressed container elevation.
--md-filter-chip-flat-unselected-focus-container-elevationFocus Fallbackvar(--md-sys-elevation-level0)	Controls chip flat unselected focus container elevation.
--md-filter-chip-flat-unselected-focus-outline-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip flat unselected focus outline color.
--md-filter-chip-flat-unselected-hover-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls chip flat unselected hover container elevation.
--md-filter-chip-flat-unselected-outline-colorState Fallbackvar(--md-sys-color-outline-variant)	Controls chip flat unselected outline color.
--md-filter-chip-flat-unselected-outline-widthState Fallback0.0625rem	Controls chip flat unselected outline width.
--md-filter-chip-flat-unselected-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls chip flat unselected pressed container elevation.
--md-filter-chip-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls chip focus indicator color.
--md-filter-chip-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls chip focus indicator outline offset.
--md-filter-chip-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls chip focus indicator thickness.
--md-filter-chip-selected-focus-label-text-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected focus label text color.
--md-filter-chip-selected-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected focus state layer color.
--md-filter-chip-selected-hover-label-text-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected hover label text color.
--md-filter-chip-selected-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected hover state layer color.
--md-filter-chip-selected-label-text-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected label text color.
--md-filter-chip-selected-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected pressed label text color.
--md-filter-chip-selected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip selected pressed state layer color.
--md-filter-chip-unselected-focus-label-text-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected focus label text color.
--md-filter-chip-unselected-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected focus state layer color.
--md-filter-chip-unselected-hover-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected hover label text color.
--md-filter-chip-unselected-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected hover state layer color.
--md-filter-chip-unselected-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected label text color.
--md-filter-chip-unselected-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected pressed label text color.
--md-filter-chip-unselected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip unselected pressed state layer color.
--md-filter-chip-with-icon-icon-sizeLayout Fallback1.125rem	Controls chip with icon icon size.
--md-filter-chip-with-leading-icon-disabled-leading-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip with leading icon disabled leading icon color.
--md-filter-chip-with-leading-icon-disabled-leading-icon-opacityDisabled Fallback0.38	Controls chip with leading icon disabled leading icon opacity.
--md-filter-chip-with-leading-icon-selected-focus-leading-icon-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with leading icon selected focus leading icon color.
--md-filter-chip-with-leading-icon-selected-hover-leading-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with leading icon selected hover leading icon color.
--md-filter-chip-with-leading-icon-selected-leading-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with leading icon selected leading icon color.
--md-filter-chip-with-leading-icon-selected-pressed-leading-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with leading icon selected pressed leading icon color.
--md-filter-chip-with-leading-icon-unselected-focus-leading-icon-colorFocus Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon unselected focus leading icon color.
--md-filter-chip-with-leading-icon-unselected-hover-leading-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon unselected hover leading icon color.
--md-filter-chip-with-leading-icon-unselected-leading-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon unselected leading icon color.
--md-filter-chip-with-leading-icon-unselected-pressed-leading-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon unselected pressed leading icon color.
--md-filter-chip-with-trailing-icon-disabled-trailing-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip with trailing icon disabled trailing icon color.
--md-filter-chip-with-trailing-icon-selected-focus-trailing-icon-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with trailing icon selected focus trailing icon color.
--md-filter-chip-with-trailing-icon-selected-hover-trailing-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with trailing icon selected hover trailing icon color.
--md-filter-chip-with-trailing-icon-selected-pressed-trailing-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with trailing icon selected pressed trailing icon color.
--md-filter-chip-with-trailing-icon-selected-trailing-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with trailing icon selected trailing icon color.
--md-filter-chip-with-trailing-icon-unselected-focus-trailing-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip with trailing icon unselected focus trailing icon color.
--md-filter-chip-with-trailing-icon-unselected-hover-trailing-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip with trailing icon unselected hover trailing icon color.
--md-filter-chip-with-trailing-icon-unselected-pressed-trailing-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip with trailing icon unselected pressed trailing icon color.
--md-filter-chip-with-trailing-icon-unselected-trailing-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip with trailing icon unselected trailing icon color.
--md-input-chip-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls chip container elevation.
--md-input-chip-container-heightLayout Fallback2rem	Controls chip container height.
--md-input-chip-container-shapeShape Fallbackvar(--md-shape-chip)	Controls chip container shape.
--md-input-chip-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip disabled label text color.
--md-input-chip-disabled-label-text-opacityDisabled Fallback0.38	Controls chip disabled label text opacity.
--md-input-chip-disabled-selected-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip disabled selected container color.
--md-input-chip-disabled-selected-container-opacityDisabled Fallback0.12	Controls chip disabled selected container opacity.
--md-input-chip-disabled-unselected-outline-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip disabled unselected outline color.
--md-input-chip-disabled-unselected-outline-opacityDisabled Fallback0.12	Controls chip disabled unselected outline opacity.
--md-input-chip-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls chip focus indicator color.
--md-input-chip-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls chip focus indicator outline offset.
--md-input-chip-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls chip focus indicator thickness.
--md-input-chip-selected-container-colorState Fallbackvar(--md-sys-color-secondary-container)	Controls chip selected container color.
--md-input-chip-selected-focus-label-text-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected focus label text color.
--md-input-chip-selected-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected focus state layer color.
--md-input-chip-selected-hover-label-text-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected hover label text color.
--md-input-chip-selected-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected hover state layer color.
--md-input-chip-selected-label-text-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected label text color.
--md-input-chip-selected-outline-widthState Fallback0	Controls chip selected outline width.
--md-input-chip-selected-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected pressed label text color.
--md-input-chip-selected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip selected pressed state layer color.
--md-input-chip-unselected-focus-label-text-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected focus label text color.
--md-input-chip-unselected-focus-outline-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected focus outline color.
--md-input-chip-unselected-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected focus state layer color.
--md-input-chip-unselected-hover-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected hover label text color.
--md-input-chip-unselected-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected hover state layer color.
--md-input-chip-unselected-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected label text color.
--md-input-chip-unselected-outline-colorState Fallbackvar(--md-sys-color-outline-variant)	Controls chip unselected outline color.
--md-input-chip-unselected-outline-widthState Fallback0.0625rem	Controls chip unselected outline width.
--md-input-chip-unselected-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected pressed label text color.
--md-input-chip-unselected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip unselected pressed state layer color.
--md-input-chip-with-avatar-avatar-shapeShape Fallbackvar(--md-sys-shape-corner-full)	Controls chip with avatar avatar shape.
--md-input-chip-with-avatar-avatar-sizeLayout Fallback1.5rem	Controls chip with avatar avatar size.
--md-input-chip-with-avatar-disabled-avatar-opacityDisabled Fallback0.38	Controls chip with avatar disabled avatar opacity.
--md-input-chip-with-leading-icon-disabled-leading-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip with leading icon disabled leading icon color.
--md-input-chip-with-leading-icon-disabled-leading-icon-opacityDisabled Fallback0.38	Controls chip with leading icon disabled leading icon opacity.
--md-input-chip-with-leading-icon-leading-icon-sizeLayout Fallback1.125rem	Controls chip with leading icon leading icon size.
--md-input-chip-with-leading-icon-selected-focus-leading-icon-colorFocus Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon selected focus leading icon color.
--md-input-chip-with-leading-icon-selected-hover-leading-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon selected hover leading icon color.
--md-input-chip-with-leading-icon-selected-leading-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon selected leading icon color.
--md-input-chip-with-leading-icon-selected-pressed-leading-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon selected pressed leading icon color.
--md-input-chip-with-leading-icon-unselected-focus-leading-icon-colorFocus Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon unselected focus leading icon color.
--md-input-chip-with-leading-icon-unselected-hover-leading-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon unselected hover leading icon color.
--md-input-chip-with-leading-icon-unselected-leading-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip with leading icon unselected leading icon color.
--md-input-chip-with-leading-icon-unselected-pressed-leading-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon unselected pressed leading icon color.
--md-input-chip-with-trailing-icon-disabled-trailing-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip with trailing icon disabled trailing icon color.
--md-input-chip-with-trailing-icon-selected-focus-trailing-icon-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with trailing icon selected focus trailing icon color.
--md-input-chip-with-trailing-icon-selected-hover-trailing-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with trailing icon selected hover trailing icon color.
--md-input-chip-with-trailing-icon-selected-pressed-trailing-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with trailing icon selected pressed trailing icon color.
--md-input-chip-with-trailing-icon-selected-trailing-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls chip with trailing icon selected trailing icon color.
--md-input-chip-with-trailing-icon-unselected-focus-trailing-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip with trailing icon unselected focus trailing icon color.
--md-input-chip-with-trailing-icon-unselected-hover-trailing-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip with trailing icon unselected hover trailing icon color.
--md-input-chip-with-trailing-icon-unselected-pressed-trailing-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip with trailing icon unselected pressed trailing icon color.
--md-input-chip-with-trailing-icon-unselected-trailing-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip with trailing icon unselected trailing icon color.
--md-suggestion-chip-container-heightLayout Fallback2rem	Controls chip container height.
--md-suggestion-chip-container-shapeShape Fallbackvar(--md-shape-chip)	Controls chip container shape.
--md-suggestion-chip-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip disabled label text color.
--md-suggestion-chip-disabled-label-text-opacityDisabled Fallback0.38	Controls chip disabled label text opacity.
--md-suggestion-chip-elevated-container-colorColor Fallbackvar(--md-sys-color-surface-container-low)	Controls chip elevated container color.
--md-suggestion-chip-elevated-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls chip elevated container elevation.
--md-suggestion-chip-elevated-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip elevated disabled container color.
--md-suggestion-chip-elevated-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls chip elevated disabled container elevation.
--md-suggestion-chip-elevated-disabled-container-opacityDisabled Fallback0.12	Controls chip elevated disabled container opacity.
--md-suggestion-chip-elevated-focus-container-elevationFocus Fallbackvar(--md-sys-elevation-level1)	Controls chip elevated focus container elevation.
--md-suggestion-chip-flat-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls chip flat container elevation.
--md-suggestion-chip-flat-disabled-outline-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip flat disabled outline color.
--md-suggestion-chip-flat-disabled-outline-opacityDisabled Fallback0.12	Controls chip flat disabled outline opacity.
--md-suggestion-chip-flat-focus-outline-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip flat focus outline color.
--md-suggestion-chip-flat-outline-colorColor Fallbackvar(--md-sys-color-outline-variant)	Controls chip flat outline color.
--md-suggestion-chip-flat-outline-widthLayout Fallback0.0625rem	Controls chip flat outline width.
--md-suggestion-chip-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls chip focus indicator color.
--md-suggestion-chip-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls chip focus indicator outline offset.
--md-suggestion-chip-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls chip focus indicator thickness.
--md-suggestion-chip-focus-label-text-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip focus label text color.
--md-suggestion-chip-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip focus state layer color.
--md-suggestion-chip-hover-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip hover label text color.
--md-suggestion-chip-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip hover state layer color.
--md-suggestion-chip-label-text-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip label text color.
--md-suggestion-chip-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip pressed label text color.
--md-suggestion-chip-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls chip pressed state layer color.
--md-suggestion-chip-with-leading-icon-disabled-leading-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls chip with leading icon disabled leading icon color.
--md-suggestion-chip-with-leading-icon-disabled-leading-icon-opacityDisabled Fallback0.38	Controls chip with leading icon disabled leading icon opacity.
--md-suggestion-chip-with-leading-icon-focus-leading-icon-colorFocus Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon focus leading icon color.
--md-suggestion-chip-with-leading-icon-hover-leading-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon hover leading icon color.
--md-suggestion-chip-with-leading-icon-leading-icon-colorColor Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon leading icon color.
--md-suggestion-chip-with-leading-icon-leading-icon-sizeLayout Fallback1.125rem	Controls chip with leading icon leading icon size.
--md-suggestion-chip-with-leading-icon-pressed-leading-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls chip with leading icon pressed leading icon color.

Examples

Default

Chip

Variants

checkFilter Input close

Icons

settingsLeading iconcheckTrailing iconclose

Avatar

Alex close

Selection Group

checkUpdatesAlertsSaved

checkUpdatesAlertsSaved

Disabled

AssistcheckSelected