'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
Tag
Removable or selectable tags: filters and chosen values.
Ant Design: Tag, Select mode="tags"
import { TagGroup, Tag } from '@alea/ui';
Examples
Removable tags
Chosen values with an x. Delete and Backspace remove the focused tag.
Languages to test
Filters
selectionMode turns tags into toggles.
Show
Props
TagGroup props
Tags that can be selected (filters) or removed (chosen values). Arrow keys move, Delete removes.
| Prop | Type | Default | Description |
|---|---|---|---|
items | Iterable<T> | - | The tags as data, rendered with the children function. |
label | ReactNode | - | The visible label for the group. |
onRemove | ((keys: Set<Key>) => void) | - | Called with the removed keys; shows an x on each tag. |
renderEmptyState | (() => ReactNode) | - | Shown when there are no tags. |
Tag props
One tag in a TagGroup.
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "danger" | "success" | "warning" | "accent" | "info" | "neutral" | 'neutral' | Color of the tag: neutral (default), accent, success, warning, danger or info. |
Accessibility
- A keyboard-navigable grid; Delete and Backspace remove the focused tag.
Keyboard
| Key | Does |
|---|---|
| Arrow keys | Move between tags |
| Delete / Backspace | Removes the tag |
| Space | Selects (selection mode) |
Do and don't
Do
- Keep tags to one or two words.
- Make removable tags removable with the keyboard too (onRemove does it).
Don't
- Don't use tags as buttons that run actions.
- Don't show more than a line of tags without a way to see the rest.