ChipGroup

A chip group component.

Importing

Web

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

React

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

Component Usage

Web

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

React

<ChipGroup />

Properties

Name	Description	Type	Default Value
select-mode	The select mode of the chip group.	"single" | "multiple"	"multiple"
orientation	The orientation of the chip group.	"horizontal" | "vertical"	"horizontal"
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	Description
-	The default slot for chips.

TIP

You can use slot names as variables:

Web

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

console.log(Slots.DEFAULT); // ""

React

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

console.log(ChipGroupSlots.DEFAULT); // ""

Events

Name	Description	Type
selectchange	Fired when the chip selection state changes. (Bubbles).	SelectChangeEvent

TIP

You can import custom event names:

Web

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

element.addEventListener(SelectChangeEvent.type, handleTapsiChipGroupSelectChange);

React

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


// ...

<ChipGroup
  onSelectChangeEvent={(e: ChipGroupSelectChangeEvent) => {...}}
/>