Tag Group

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/tag-group

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components @heroicons/react cn

Anatomy

import { Tag, TagGroup, TagList } from "@/components/ui/tag-group"
import { Label } from "@/components/ui/field"

<TagGroup selectionMode="multiple">
  <Label>Serverless</Label>
  <TagList>
    <Tag>AWS Lambda</Tag>
    <Tag>Google Cloud Functions</Tag>
    <Tag>Azure Functions</Tag>
  </TagList>
</TagGroup>

Examples

With remove button

Tags within the group can include a removal button.

Controlled

Manage the values of the tag group through the value prop.

Links

Incorporate a hyperlink within the tag group using the href prop.

Disabled

Disable tags either by setting the isDisabled prop or using disabledKeys on the TagGroup.

Component API

Tag

TagGroup

TagList