dotUI

Tag Group

A tag group displays a collection of tags.

Docs
Overview
Examples
Tag 1
Tag 2
Tag 3
<TagGroup>
  <Label></Label>
  <TagList>
    <Tag>Tag 1</Tag>
    <Tag>Tag 2</Tag>
    <Tag>Tag 3</Tag>
  </TagList>
</TagGroup>

Installation

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>

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.

PropType
ReactNode
SelectionMode
SelectionBehavior
Iterable<Key> | "all"
Iterable<Key> | "all"
function
Iterable<Key>
boolean
boolean
"none" | "clearSelection"

On this page

Last updated on 1/13/2026

On this page

dotUI

Bringing singularity to the web.

Community

Built with passion by @mehdibha.