Chip

<sl-chip> | SlChip
Since 2.2.0 stable

Chips allow users to multi select or (multi) deselect options in a group easily. They can be used for categorising items, filtering content, and displaying related choices in a form. These chips enhance user interaction by providing a clear and intuitive way to manage selections.

Text 
<sl-chip>Text</sl-chip>

Examples

States

Diffrent styles on active, disabled and default.

Text Text Text 
<div style="display: flex; gap: 10px;">
  <sl-chip>Text</sl-chip>
  <sl-chip active>Text</sl-chip>
  <sl-chip disabled>Text</sl-chip>
</div>

Prefix and Suffix

Individual chips can have slots for prefix and suffix or similar elements. Active chips can use a tick icon to make selections clear but it is not mandatory.

Text Text Text 
<div style="display: flex; gap: 10px;">
  <sl-chip>
    <sl-icon name="gear" slot="prefix"></sl-icon>
    Text
  </sl-chip>

  <sl-chip active>
    Text
    <sl-icon name="check" slot="suffix"></sl-icon>
  </sl-chip>

  <sl-chip>
    <sl-icon name="house" slot="prefix"></sl-icon>
    Text
    <sl-icon name="check" slot="suffix"></sl-icon>
  </sl-chip>
</div>

[component-metadata:sl-chip]

Slots

Name Description
(default) The default slot.
prefix The prefix slot.
suffix The suffix slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
disabled Whether the chip is disabled. boolean false
active Whether the chip is active. boolean false
value The chip’s value. This is used to identify the chip in a group and for form submission. It must be unique within a group. string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-change Emitted when the chip’s active state changes. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>