Chip
A compact token for a selected or entered value, with optional media and a remove button.
<sa-field>
<sa-field-title id="trip-destinations-label">Destinations</sa-field-title>
<sa-chip-group appearance="ChipGroupAppearance.Input" aria-labelledby="trip-destinations-label">
<sa-chip>
Lisbon
<sa-chip-remove aria-label="Remove Lisbon"/>
</sa-chip>
<sa-chip>
Kyoto
<sa-chip-remove aria-label="Remove Kyoto"/>
</sa-chip>
<sa-chip>
Cape Town
<sa-chip-remove aria-label="Remove Cape Town"/>
</sa-chip>
<sa-button variant="ButtonVariant.Ghost" size="ButtonSize.ExtraSmall">
<sa-icon name="plus"/>
Add destination
</sa-button>
</sa-chip-group>
</sa-field>Usage
Put chips in an <sa-chip-group>. Each <sa-chip> holds optional media, its label and an optional <sa-chip-remove>, in that order. Set appearance to ChipGroupAppearance.Input to show the chips in a box styled like an input; a button placed directly in the group, such as Add, takes the chips' size.
<sa-chip-group appearance="ChipGroupAppearance.Input" aria-labelledby="...">
<sa-chip>
...
<sa-chip-remove aria-label="Remove ..." />
</sa-chip>
<sa-button variant="ButtonVariant.Ghost" size="ButtonSize.ExtraSmall">...</sa-button>
</sa-chip-group>Chips have no script of their own. <sa-chip-remove> renders a button, and removing the chip and updating the value is up to your page. Only the remove buttons are focusable, so name the group with aria-labelledby and give every remove button an aria-label that names its chip.
Examples
Media
Place media directly in the chip, before the label. An <sa-icon>, an <sa-avatar> with a photo or initials, an <img> and a <code> element are each sized to fit the chip, and their corners follow the chip's shape in every theme. An image beside the label is decorative, so give it an empty alt.
<sa-chip-group>
<sa-chip>
<sa-icon name="plane"/>
Flights
</sa-chip>
<sa-chip>
<sa-avatar src="/avatars/avatar-1.jpg"/>
Elena Marchetti
</sa-chip>
<sa-chip>
<sa-avatar name="Priya Nair"/>
Priya Nair
</sa-chip>
<sa-chip>
<img src="/cities/kyoto.jpg" alt=""/>
Kyoto
</sa-chip>
<sa-chip>
<code>CPT</code>
Cape Town
</sa-chip>
</sa-chip-group>Removable
Chips with remove buttons work on the page's own background too, without the input box. Here they show the filters applied to a list, with a Clear all button beside them.
<sa-field>
<sa-field-title id="tour-filters-label">Filters</sa-field-title>
<sa-chip-group aria-labelledby="tour-filters-label">
<sa-chip>
<sa-icon name="map-pin"/>
Southern Europe
<sa-chip-remove aria-label="Remove Southern Europe"/>
</sa-chip>
<sa-chip>
<sa-icon name="calendar"/>
May to June
<sa-chip-remove aria-label="Remove May to June"/>
</sa-chip>
<sa-chip>
<sa-icon name="users"/>
2 travellers
<sa-chip-remove aria-label="Remove 2 travellers"/>
</sa-chip>
<sa-button variant="ButtonVariant.Ghost" size="ButtonSize.ExtraSmall">
Clear all
</sa-button>
</sa-chip-group>
</sa-field>Read-only
Leave out <sa-chip-remove> to show a fixed set of values. Add role="list" to the group and role="listitem" to each chip so screen readers announce the set and its size. The input-styled group usually also holds a button, which a list does not allow, so the group sets no role by default.
<sa-field>
<sa-field-title id="booking-travellers-label">Travellers</sa-field-title>
<sa-chip-group role="list" aria-labelledby="booking-travellers-label">
<sa-chip role="listitem">
<sa-avatar src="/avatars/avatar-1.jpg"/>
Elena Marchetti
</sa-chip>
<sa-chip role="listitem">
<sa-avatar src="/avatars/avatar-2.jpg"/>
Tomás Herrera
</sa-chip>
<sa-chip role="listitem">
<sa-avatar name="Priya Nair"/>
Priya Nair
</sa-chip>
</sa-chip-group>
</sa-field>Disabled
Set disabled on the group to disable every chip's remove button, or on a single <sa-chip> to disable just that one. Disabled chips are dimmed.
<sa-field>
<sa-field-title id="locked-destinations-label">Destinations</sa-field-title>
<sa-chip-group appearance="ChipGroupAppearance.Input" disabled="true" aria-labelledby="locked-destinations-label">
<sa-chip>
<code>LIS</code>
Lisbon
<sa-chip-remove aria-label="Remove Lisbon"/>
</sa-chip>
<sa-chip>
<code>KIX</code>
Kyoto
<sa-chip-remove aria-label="Remove Kyoto"/>
</sa-chip>
</sa-chip-group>
<sa-field-description>
Destinations can't change once the itinerary is ticketed.
</sa-field-description>
</sa-field>Invalid
Set invalid on the group to show the input box's invalid ring. It sets aria-invalid="true" on the group; point aria-describedby at the error message.
<sa-field>
<sa-field-title id="tour-stops-label">Tour stops</sa-field-title>
<sa-chip-group
appearance="ChipGroupAppearance.Input"
invalid="true"
aria-labelledby="tour-stops-label"
aria-describedby="tour-stops-error"
>
<sa-chip>
Chiang Mai
<sa-chip-remove aria-label="Remove Chiang Mai"/>
</sa-chip>
<sa-button variant="ButtonVariant.Ghost" size="ButtonSize.ExtraSmall">
<sa-icon name="plus"/>
Add stop
</sa-button>
</sa-chip-group>
<sa-field-error id="tour-stops-error">Choose at least two stops for a multi-city tour.</sa-field-error>
</sa-field>API Reference
<sa-chip-group>
Renders a <div> element, forwarding any global attributes.
Prop
Type
<sa-chip>
Renders a <span> element, forwarding any global attributes.
Prop
Type
<sa-chip-remove>
Renders a <button> element styled as a ghost icon button, with a close icon when it has no content. The type defaults to button so a chip inside a form does not submit it. An aria-label is required, and rendering fails without one.