Android Brands
Samsung
OnePlus
Google
Xiaomi
"use client"
import { Label } from "@/components/ui/preskok-ui/field"
import {
Tag,
TagGroup,
TagList,
} from "@/components/ui/preskok-ui/tag-group"
export const androidBrands = [
{ id: "1", name: "Samsung", available: false },
{ id: "2", name: "OnePlus", available: true },
{ id: "3", name: "Google", available: true },
{ id: "4", name: "Xiaomi", available: false },
]
export function TagGroupPreskokDemo() {
return (
<TagGroup selectionMode="multiple">
<Label>Android Brands</Label>
<TagList items={androidBrands}>
{(item) => <Tag>{item.name}</Tag>}
</TagList>
</TagGroup>
)
}
Installation
CLI
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>
)
}