Data Display
Tag Group
A tag group displays a collection of tags that can optionally be removed.
A tag group displays a collection of tags that can optionally be removed.
- React
- Vue
- Angular
Removable#
Add onRemove to make tags removable. An X button will appear on each tag.
- JavaScript
- TypeScript
- Python
Variants#
- Default
- Tags
- Outline
- Tags
- Primary
- Tags
Component props#
TagGroup#
| Name | Type | Description |
|---|---|---|
| label | string | Label text displayed above the group |
| onRemove | (keys: Set<Key>) => void | Called when tags are removed. Enables remove buttons. |
| disabledKeys | Iterable<Key> | Keys of tags that cannot be removed |
Tag#
| Name | Type | Description |
|---|---|---|
| id | string | Unique tag identifier (required) |
| variant | "default" | "outline" | "primary" | Visual style variant |
| isDisabled | boolean | Disables the tag |