@purpurds/chip-group v5.1.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>
);
};
1 day ago
8 days ago
14 days ago
16 days ago
15 days ago
15 days ago
19 days ago
28 days ago
28 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago