Skip to content

ChipGroup

A chip group component.

  • Import
    import "@tapsioss/web-components/chip-group";
  • Tag
    <tapsi-chip-group></tapsi-chip-group>

Properties

NameDescriptionTypeDefault Value
select-modeThe select mode of the chip group."single" | "multiple""single"
orientationThe orientation of the chip group."horizontal" | "vertical""horizontal"
labelDefines 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-labelstring""

Slots

NameDescription
-The default slot for chips.

TIP

You can use slot names as variables:

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

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

Events

NameDescriptionType
selectchangeFired when the chip selection state changes. (Bubbles).SelectChangeEvent

TIP

You can import custom event names:

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

element.addEventListener(SelectChangeEvent.type, handleTapsiChipGroupSelectChange);