Tag Group
A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
Installation
CLI
Manual
Examples
With remove button
Tags within the group can include a removal button.
tag-group-with-remove-demo
Controlled
Manage the values of the tag group through the value prop.
tag-group-controlled-demo
You have selected:
Links
Incorporate a hyperlink within the tag group using the href prop.
tag-group-href-demo
For client-side routing, React Aria recommends using the onAction event to handle navigation programmatically instead of passing an href prop.
This is because some collection items cannot be rendered as native elements due to HTML specification limitations.
Disabled
Disable tags either by setting the isDisabled prop or using disabledKeys on the TagGroup.
tag-group-disabled-demo