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.
suffix — Renders content at the end of the chip after the default 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.
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.

Properties

Section titled "Properties"

disabled

Section titled "disabled"

Sets the disabled state for the chip.

 
disabled: boolean

locale

Section titled "locale"

Gets/Sets the locale used for getting language, affecting resource strings.

 
locale: string

removable

Section titled "removable"

Defines if the chip is removable or not.

 
removable: boolean

resourceStrings

Section titled "resourceStrings"

The resource strings for localization. Currently only aria-labels for the default select/remove icons are localized.

 
resourceStrings: IChipResourceStrings

selectable

Section titled "selectable"

Defines if the chip is selectable or not.

 
selectable: boolean

selected

Section titled "selected"

Defines if 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

Events

Section titled "Events"

onRemove

Section titled "onRemove"

Emits an event when the chip component is removed. Returns the removed chip component.

 
onRemove(args: CustomEvent<boolean>): void

Parameters

Returns void

onSelect

Section titled "onSelect"

Emits event when the chip component is selected/deselected and any related animations and transitions also end.

 
onSelect(args: CustomEvent<boolean>): void

Parameters

Returns void