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.



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


SfChip provides ::vue-onlyprefix and suffix slots::::react-onlyslotPrefix and slotSuffix props:: 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.