@purpurds/chip-group
v4.3.0
Published
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
Downloads
2,088
Readme
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>
);
};