2 of 6 topics selected
Installation
You can add the tag group using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add tag-groupUsing a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.
Removable tags
Pass onRemove and each tag gets a small remove button; Backspace or Delete removes the focused tag too. With items, the group renders tags from your data, and emptyState fills the space once the last one goes.
const [skills, setSkills] = useState([ { id: "react", name: "React" }, { id: "typescript", name: "TypeScript" },]);
<TagGroup label="Skills" items={skills} onRemove={(keys) => setSkills(skills.filter((skill) => !keys.has(skill.id)))} emptyState="No skills yet."> {(skill) => <Tag>{skill.name}</Tag>}</TagGroup>Colors and sizes
Tags take Chip's colour pairs through color and an optional icon. size="small" makes them 24px tall, and selectionMode="single" turns the group into a choice of one.
<TagGroup label="Labels"> <Tag id="bug" color="rose" icon={RiBugLine}>Bug</Tag> <Tag id="feature" color="lime" icon={RiSparklingLine}>Feature</Tag> <Tag id="docs" color="cyan" icon={RiBookOpenLine}>Docs</Tag></TagGroup>
<TagGroup label="Small" size="small" selectionMode="single" defaultSelectedKeys={["week"]} disallowEmptySelection> <Tag id="day">Today</Tag> <Tag id="week">This week</Tag> <Tag id="month">This month</Tag></TagGroup>Right-to-left
Inside DirectionProvider, tags flow from the right, the remove buttons sit at their left ends, and the arrow keys follow the reading direction.
import { DirectionProvider } from "@/components/foundations/direction/direction";
<DirectionProvider locale="ar"> <TagGroup label="المهارات" items={skills} onRemove={remove}> {(skill) => <Tag>{skill.name}</Tag>} </TagGroup></DirectionProvider>Keyboard and accessibility
The group is one tab stop. Arrow keys move between tags, Space and Enter toggle a selectable tag, and Backspace or Delete removes a removable one, moving focus to its neighbour. Screen readers hear the group's label, the number of tags, and whether each one is selected.