@purpurds/chip-group v5.24.1

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import as ChipGroupStories from "./src/chip-group.stories"; import as ChipGroupItemStories from "./src/chip-group-item.stories"; import packageInfo from "./package.json";

ChipGroup

Version {packageInfo.version}

This component can be used both as a Filter Chip (multiple choice) and Choice Chip (single choice) component. The type prop determines which type of component will be used.

Showcase

Properties

ChipGroup

ChipGroupItem

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

In MyComponent.tsx

import { useState } from "react";
import { ChipGroup } from "@purpurds/purpur";

export const MyComponent = () => {
  const [value, setValue] = useState("one");

  return (
    <ChipGroup type="choice" value={value} onValueChange={setValue}>
      <ChipGroup.Item value="one">Option 1</ChipGroup.Item>
      <ChipGroup.Item value="two">Option 2</ChipGroup.Item>
    </ChipGroup>
  );
};

import { useState } from "react";
import { ChipGroup } from "@purpurds/chip-group";

export const MyComponent = () => {
  const [value, setValue] = useState<string[]>([]);

  return (
    <ChipGroup type="filter" value={value} onValueChange={setValue}>
      <ChipGroup.Item value="one">Option 1</ChipGroup.Item>
      <ChipGroup.Item value="two">Option 2</ChipGroup.Item>
    </ChipGroup>
  );
};