Tag / TagGroup

Two components: TagGroup (the container) and Tag (individual chips). Built on React Aria’s TagGroup and Tag primitives with keyboard navigation and ARIA group labelling.

Add via CLI

npx @a2ra/cli add tag

Read-only tags

Selectable tags

Example JSON

{
  "type": "TagGroup",
  "props": {
    "label": "Filter by status",
    "selectionMode": "multiple"
  },
  "children": [
    { "type": "Tag", "props": { "id": "active" }, "children": "Active" },
    { "type": "Tag", "props": { "id": "pending" }, "children": "Pending" },
    { "type": "Tag", "props": { "id": "archived" }, "children": "Archived" }
  ]
}

TagGroup props

Prop	Type	Description
label	string	Visible group label
selectionMode	none default single multiple	Selection behaviour
description	string	Helper text shown below the group
children	node[]	Tag child nodes

Tag props

Prop	Type	Description
id	string	Unique identifier for selection tracking
isDisabled	true false default	Disables this tag
children	string	Tag label text

Notes

• selectionMode: "none" (default) renders tags as static labels.
• With selectionMode: "single" or "multiple", tags become interactive toggle buttons.
• Arrow keys navigate between tags; Space or Enter selects the focused tag.