Example
Patterns
Collections
Tag group implements the react-stately collection component <Item> for dynamic and static collections.
Static collections, seen in the example above, can be used when the full list of options is known ahead of time.
Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time. Providing the data in this way allows the tag group to cache the rendering of each item, which improves performance.
Slots
Icons and avatars can be added as children of an item, to better communicate a tag's value among the group.
Extra visual details increase the cognitive load on users. Include additional elements only when it improves clarity and will contribute positively to the understanding of an interface.
Links
Tags may be links to another page or website. This can be achieved by passing the href prop to each item.
Events
onRemove
Enable removable tags by providing the onRemove prop to a tag group, which will receive the set of keys to remove.
onAction
The tag group supports an onAction handler that, when used with the actionLabel prop, will add an action button at the end of the tags that can be used to perform a custom action.
Props
Label
Each TagGroup should be labelled using the label prop. If a visible label isn’t appropriate, use the aria-label prop to identify the control for accessibility.
Max rows
Limit the number of rows initially shown by providing a maxRows prop. This will append an action button that can be pressed to show the remaining tags.
Empty state
Use the renderEmptyState prop to customise what the tag group will display if there are no tags provided.