TagGroup

ReactProps

Github Storybook Markdown Copy for LLM

A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation and removal.

Import

import { TagGroup } from "@cfa/react-core";

Live Editor

Guidelines

When to use

• TagGroup is for a set of related chips people manage together, such as active filters, selected keywords, or categorized tags, with unified keyboard navigation across the group.

Do

• Provide a visible group label or aria-labelledby when TagGroup is interactive, such as filters or multi-select.

Avoid

• Using TagGroup for a single chip. Render Chip directly.
• Using TagGroup for simple, non-interactive labels with no group-level focus. Render Chips without TagGroup.
• Using TagGroup for navigation. Use Side Navigation or Tabs.

Examples

Removable

You can make tags removable by simply using the onRemove event.