Chip Group

The ChipGroup component can be used to group related chips.

Importing

To use the chip group 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-group";

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

Web (Option 2)

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

registerChipGroup(); // Now the chip group 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-group/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 { ChipGroup } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-chip-group></tapsi-chip-group>

React

<ChipGroup />

Properties

Name	Attribute Name	Description	Type	Default Value
selectMode	select-mode	The select mode of the chip group.	"single" | "multiple"	"multiple"
selectionRequired	selection-required	Determines if chip selection is required.	boolean	false
orientation	orientation	The orientation of the chip group.	"horizontal" | "vertical"	"horizontal"
cols	cols	Determines the number of columns of chips the parent will wrap. This property is only used when orientation is set to "vertical".	number	2
label	label	Defines a string value that can be used to set a label for assistive technologies. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label	string	""

Slots

Name	Value	Description
DEFAULT	-	Default slot for the content of chip.

TIP

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

Web

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

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

React

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

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

Events

Name	Description	Type	Bubbles	Cancelable
selectchange	Fired when the chip selection state changes.	SelectChangeEvent	✅	❌

TIP

Event details are available as JavaScript variables:

// Option 1
import {
 SelectChangeEvent
} from "@tapsioss/web-components/chip-group";

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

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

// Option 1
element.addEventListener(SelectChangeEvent.type, handleSelectChange);

// Option 2
element.addEventListener(ChipGroupSelectChangeEvent.type, handleSelectChange);