Chips help people enter information, make selections, filter content, or trigger actions.
Slots
default — Renders content in the default slot of the chip.
prefix — Renders content at the start of the chip, before the default content.
start — Renders content at the start of the chip, before the prefix content.
suffix — Renders content at the end of the chip after the default content.
end — Renders content at the end of the chip, before the suffix content.
select — Content to render when the chip in selected state.
remove — Content to override the default remove chip icon.
CSS Parts
base — The base wrapper of the chip.
action — The selection control of the chip, wrapping the chip content.
content — The wrapper element around the default slot of the chip.
prefix — The prefix container of the chip.
suffix — The suffix container of the chip.
remove — The container of the remove control of the chip.

Properties

Section titled "Properties"

disabled

Section titled "disabled"

Whether the chip is disabled or not.

 
disabled: boolean

outlined

Section titled "outlined"

Whether the chip is outlined or not.

 
outlined: boolean

removable

Section titled "removable"

Whether the chip is removable or not.

 
removable: boolean

selectable

Section titled "selectable"

Whether the chip is selectable or not.

 
selectable: boolean

selected

Section titled "selected"

Whether the chip is selected or not.

 
selected: boolean

variant

Section titled "variant"

A property that sets the color variant of the chip component.

 
variant: StyleVariant | undefined

Events

Section titled "Events"

onRemove

Section titled "onRemove"

Emits an event when the chip component is removed.

 
onRemove(args: CustomEvent<void>): void

Parameters

Returns void

onSelect

Section titled "onSelect"

Emits an event when the chip component is selected or deselected.

 
onSelect(args: CustomEvent<boolean>): void

Parameters

Returns void