Tag Group

A tag group displays a collection of tags.

<TagGroup>
  <Label>Categories</Label>
  <TagList>
    <Tag>News</Tag>
    <Tag>Travel</Tag>
    <Tag>Gaming</Tag>
    <Tag>Shopping</Tag>
  </TagList>
</TagGroup>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/tag-group

Usage

import { TagGroup, TagList, Tag } from '@/components/ui/tag-group'

<TagGroup>
  <TagList>
    <Tag>React</Tag>
    <Tag>TypeScript</Tag>
  </TagList>
</TagGroup>

Anatomy

A TagGroup wraps an optional Label and a TagList of Tag items.

import { TagGroup, TagList, Tag } from '@/components/ui/tag-group'
import { Label } from '@/components/ui/field'
;<TagGroup>
  <Label />
  <TagList>
    <Tag />
  </TagList>
</TagGroup>

Selection

Set selectionMode to single or multiple to make tags selectable, giving each Tag an id. Control selection with selectedKeys + onSelectionChange, or default it with defaultSelectedKeys.

<TagGroup selectionMode="multiple" defaultSelectedKeys={['news', 'gaming']}>
  <TagList>
    <Tag id="news">News</Tag>
    <Tag id="gaming">Gaming</Tag>
    <Tag id="travel">Travel</Tag>
  </TagList>
</TagGroup>

Removal

Pass onRemove to TagGroup to make tags removable — each Tag renders a remove button, and users can also delete a focused tag with ⌫.

<TagGroup onRemove={(keys) => remove(keys)}>
  <TagList>
    <Tag id="news">News</Tag>
    <Tag id="gaming">Gaming</Tag>
  </TagList>
</TagGroup>

Content

Render tags statically as children, or pass items to TagList with a render function to build them from data.

<TagList items={items}>{(item) => <Tag>{item.name}</Tag>}</TagList>

Links

Pass href to a Tag to render it as an <a>; add target for the link target. Client-side routing depends on your router setup.

<Tag href="https://tailwindcss.com" target="_blank">
  Tailwind
</Tag>

Examples

Basic

With Combobox

Frameworks

Removable Tags

With Icons

Clickable Links

API Reference

A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.

Prop	Type	Default
	`ReactNode`	`—`

	`SelectionMode`	`—`
	`SelectionBehavior`	`'toggle'`
	`Iterable<Key> \| "all"`	`—`
	`Iterable<Key> \| "all"`	`—`
	`function`	`—`
	`Iterable<Key>`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`"clearSelection" \| "none"`	`'clearSelection'`

A tag list is a container for tags within a TagGroup.

Prop	Type	Default

	`ReactNode \| function`	`—`
	`Iterable<T>`	`—`
	`function`	`—`
	`readonly any[]`	`—`

Tag

A Tag is an individual item within a TagList.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`Key`	`—`
	`boolean`	`—`
	`string`	`—`

Last updated on 7/9/2026