Chip

Chips are compact elements that represent an input, attribute, or action.

Importing

To use the chip component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

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

register(); // Now the chip component is ready to use!

Web (Option 2)

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

registerChip(); // Now the chip component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

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

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

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

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { Chip } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-chip></tapsi-chip>

React

<Chip />

Properties

Name	Attribute Name	Description	Type	Default Value
selected	selected	Whether the chip is selected or not.	boolean	false
disabled	disabled	Whether the chip is disabled or not.	boolean	false
size	size	The size of the chip.	"sm" | "md"	"md"
value	value	The value associated with the chip.	string	""

Slots

Name	Value	Description
LEADING_ICON	leading-icon	The slot for an optional trailing icon.
TRAILING_ICON	trailing-icon	The slot for an optional trailing icon.
DEFAULT	-	The slot for an optional trailing icon.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { ChipSlots } from "@tapsioss/web-components";

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

React

// Option 1
import { ChipSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/Chip";

Events

Name	Description	Type	Bubbles	Cancelable
select	Fired when the chip is selected.	SelectEvent	✅	❌
deselect	Fired when the chip is deselected.	DeselectEvent	✅	❌

TIP

Event details are available as JavaScript variables:

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

// Option 2
import {
 ChipSelectEvent,
 ChipDeselectEvent
} from "@tapsioss/web-components";

You can have access to the event name using the type property:

// Option 1
element.addEventListener(SelectEvent.type, handleSelect);
element.addEventListener(DeselectEvent.type, handleDeselect);

// Option 2
element.addEventListener(ChipSelectEvent.type, handleSelect);
element.addEventListener(ChipDeselectEvent.type, handleDeselect);