Chip

The chip component.

• Import

  import "@tapsioss/web-components/chip";

• Tag

  <tapsi-chip></tapsi-chip>

Properties

Name	Description	Type	Default Value
disabled	Whether the chip is disabled or not.	boolean	false
selected	Whether the chip is selected or not.	boolean	false
size	The size of the chip.	"sm" | "md"	"md"
value	The value associated with the chip. Use it when chips are children of chip-group. This value has to be unique among sibling chips.	string	-

Slots

Name	Description
-	Default content slot for chip text.
leading-icon	The slot for an optional leading icon.
trailing-icon	The slot for an optional trailing icon.

TIP

You can use slot names as variables:

import { Slots } from "@tapsioss/web-components/chip";

console.log(Slots.DEFAULT); // ""
console.log(Slots.LEADING_ICON); // "leading-icon"
console.log(Slots.TRAILING_ICON); // "trailing-icon"

Events

Name	Description	Type
select	Fired when the chip is selected (Bubbles).	SelectEvent
deselect	Fired when the chip is deselected (Bubbles).	DeselectEvent

TIP

You can import custom event names:

import { 
  SelectEvent,
  DeselectEvent
} from "@tapsioss/web-components/chip";

element.addEventListener(SelectEvent.type, handleTapsiChipSelect);
element.addEventListener(DeselectEvent.type, handleTapsiChipDeselect);