Theme
Tag group
A set of tags: removable, selectable, or both.
Examples
TopicsBackspace removes the focused tag.
complexity
verification
benchmarks
Open
Passed
Failed
Props
TagGroup
A set of tags. Arrow keys move between them; with onRemove, Backspace or Delete removes one; with a selectionMode, Space selects.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Names the group for screen readers; shown when `showLabel` is set. |
showLabel? | boolean | false | |
description? | ReactNode | — | |
items? | Iterable<T> | — | |
children | ReactNode | ((item: T) => ReactNode) | — |
Also takes 88 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Tag
| Prop | Type | Default | Description |
|---|---|---|---|
tone? | Tone | "neutral" | |
children | ReactNode | — |
Also takes 94 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| ArrowLeft or ArrowRight | Move between tags |
| Backspace or Delete | Removes the focused tag, when removable |
| Space | Selects the focused tag, when selectable |
Accessibility
- The group is one tab stop; the label names it even when it is not shown.