Select applicable labels
LabelsSelect applicable labels
Bug
Feature
UX
"use client"
import {
Tag,
TagGroup,
TagList,
} from "@/components/ui/preskok-ui/tag-group"
const items = [
{ id: 1, name: "Bug" },
{ id: 2, name: "Feature" },
{ id: 3, name: "UX" },
]
export function TagGroupPreskokDemo() {
return (
<TagGroup
label="Labels"
description="Select applicable labels"
selectionMode="multiple"
>
<TagList items={items}>
{(item) => <Tag id={item.id}>{item.name}</Tag>}
</TagList>
</TagGroup>
)
}
Installation
CLI
Manual
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add tag-group
Usage
import { TagGroup } from "@/registry/preskok/ui/preskok-ui/tag-group"
export function TagGroupDemo() {
return (
<TagGroup label="Labels" defaultSelectedKeys={["bug", "ux"]}>
<TagGroup.Item id="bug">Bug</TagGroup.Item>
<TagGroup.Item id="ux">UX</TagGroup.Item>
</TagGroup>
)
}