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.
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
'base'. The default size is
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.
We can set attributes in the hidden checkbox input by passing an object to the
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.
SfChip accepts a
square prop that will set equal paddings on all sides of the chip.
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.