Tag Group

PreviousNext

tag-group-demo

Docs
intentuipage

Preview

Loading preview…
components/docs/collections/tag-group/tag-group-demo.tsx
"use client"

import { Label } from "@/components/ui/field"
import { Tag, TagGroup, TagList } from "@/components/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 default function TagGroupDemo() {
  return (
    <TagGroup selectionMode="multiple">
      <Label>Android Brands</Label>
      <TagList items={androidBrands}>{(item) => <Tag>{item.name}</Tag>}</TagList>
    </TagGroup>
  )
}

Installation

npx shadcn@latest add @intentui/tag-group-demo

Usage

Usage varies by registry entry. Refer to the registry docs or source files below for details.