previously Vue Storefront Build Better Storefronts

Chip

This is an experimental component

This component is shipped in our NPM package, but its API might change based on user feedback.

SfChip is a toggleable input element. It can be a good alternative to toggle buttons, radio buttons, and single select menus.

Internally, SfChip uses a hidden <input type="checkbox"> element to handle the selection state. This means that SfChip can be used in a form alongside other form elements. If you want to add additional attributes to this hidden input, you can pass inputProps to the component.

Examples

Sizes

SfChip supports 2 sizes that can be set with the size prop: 'sm' and 'base'. The default size is 'base'.

Thumbnails

SfChip provides prefix and suffix slots that you can use to add custom content before/after your default content. This can be useful for adding things like icons, badges, or SfThumbnail to your toggleable chip.

List of chips

We can set attributes in the hidden checkbox input by passing an object to the inputProps prop.

Deletable behaviour

By adding listeners for change events, we can make SfChip act as a deletable item. All chips are active by default, and then, when a chip is clicked, we can remove it by its index in the array.

Rounded chip

SfChip accepts a square prop that will set equal paddings on all sides of the chip.

Accessibility notes

When using SfChip without any text label/description inside, you should specify an aria-label on the component so that it can be understood by people using screen readers.

Playground