Tag Group

Tag Group shows a collection of short labels that people interact with, such as applied filters, project labels or chosen recipients. It handles arrow-key focus, removal by keyboard and focus recovery after a tag leaves.

Install

bashnpx shadcn@4.18.0 add @siteplane/tag-group

Import it from @/siteplane/components/tag-group. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Badge: Pick Badge for a static label that nobody selects or removes.
• vs Filter Bar: Inside a Filter Bar, put the removable tags in its active-filters row.

Rules

• Make a tag selectable with selected plus onSelectedChange, or with defaultSelected for tag-owned state.
• Pass onRemove to give each tag a remove button and keyboard deletion; drop the tag from your state in the handler and label the button with removeLabel.
• Use stable React keys, never the index, or the wrong tag animates out.
• Render Tag elements directly inside TagGroup (fragments are fine) and do not wrap each tag in your own component.
• Set size once on the group so every tag matches.

Reference

• Tag Group docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.