Components
Loading preview...
Here is Tag Group component
@jollyshopland
npx shadcn@latest add https://21st.dev/r/jollyshopland/tag-groupimport { useListData } from "react-stately"
import { Label } from "@/components/ui/text-field-basic"
import { Tag, TagGroup, TagList } from "@/components/ui/tag-group"
export default function TagGroupRemove() {
let list = useListData({
initialItems: [
{ id: 1, name: "News" },
{ id: 2, name: "Travel" },
{ id: 3, name: "Gaming" },
{ id: 4, name: "Shopping" },
],
})
return (
<TagGroup
className="space-y-1"
selectionMode="multiple"
// @ts-expect-error
onRemove={(keys) => list.remove(...keys)}
>
<Label>Categories</Label>
<TagList items={list.items}>{(item) => <Tag>{item.name}</Tag>}</TagList>
</TagGroup>
)
}