Chips with dots, avatars, flags, icons, counts and remove buttons, selectable singly or in sets; a removed chip blurs out while its neighbours slide closed.
tagchipfiltertag groupremovableselection
Installation
$npx shadcn@latest add @geturui/tag-group
Usage
usage.tsx
1import { Tag, TagGroup } from "@/components/ui/tag-group";
2
3export function StackFilter() {
4 return (
5 <TagGroup label="Filter by stack" selectionMode="multiple" defaultValue={["react"]}>
6 <Tag value="react" count={128}>React</Tag>
7 <Tag value="next" count={96}>Next.js</Tag>
8 <Tag value="svelte" disabled>Svelte</Tag>
9 </TagGroup>
10 );
11}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Names the grid; shown above the tags unless hideLabel. |
selectionMode | "none" | "single" | "multiple" | "none" | Single keeps one tag picked; multiple toggles. Selectable tags show a drawn checkbox. |
value / defaultValue / onValueChange | string[] | — | Selected tag values. |
onRemove | (value: string) => void | — | Adds remove buttons and Backspace/Delete to every tag. Remove the item from your list to animate it out. |
size | "sm" | "md" | "lg" | "md" | 24, 28 or 32px chips, shared with every Tag. |
emptyState | ReactNode | — | Shown when no tags are left. |
Tag value | string | — | Identity for selection and removal. Defaults to the text label. |
Tag dot | boolean | "success" | "warning" | "danger" | "info" | "volt" | "muted" | — | Leading status dot. |
Tag initials / avatar / icon / flag | string / ReactNode / ReactNode / { stripes, orientation?, disc? } | — | Leading media. Flags are drawn as stripes and an optional disc from the colours you pass. |
Tag count | number | — | Trailing count pill. |
Tag onRemove | () => void | — | Per-tag remove button; works outside a TagGroup too. |
Tag disabled | boolean | false | Dims the tag and takes it out of selection, removal and arrow navigation. |
Accessibility
- The group is a grid with one tab stop; arrow keys move between tags, Home and End jump to the ends.
- Space or Enter selects, and aria-selected reports the state; multiple mode sets aria-multiselectable.
- Backspace or Delete removes the focused tag and focus moves to its neighbour. Remove buttons are labelled and stay out of the tab order inside a group.
- Exit and reflow animations become a fade under reduced motion.