Collections

Tag Group

A collection of tags displayed together, allowing users to categorize, filter, or manage multiple labels efficiently.

TagGroup
TableTree

Basic

A tag group is a focusable collection of labels, categories, keywords, filters, or other elements, equipped with keyboard navigation, selection, and removal functionalities.

Loading...

Installation

npx shadcn@latest add @intentui/tag-group

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

This component comes packed with several components to enhance functionality and provide a seamless experience.

fieldbadge

Manual installation

npm i react-aria-components @intentui/icons

Anatomy

import { Tag, TagGroup, TagList } from "@/components/ui/tag-group"
<TagGroup label="Serverless" selectionMode="multiple">
  <TagList>
    <Tag>AWS Lambda</Tag>
    <Tag>Google Cloud Functions</Tag>
    <Tag>Azure Functions</Tag>
  </TagList>
</TagGroup>

With remove button

Tags within the group can include a removal button.

Loading...

Controlled

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

Loading...

Href

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

Loading...

Disabled

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

Loading...
Unlock the full power of
Design Intent UI
Build modern web apps faster with 400+ blocks and polished templates crafted for professionals.
Explore
Table
Tree