TagGroup

Display a group of tags that can be selected and removed.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field
Labels
Bug
Feature
Chore
TagGroup example
import { Tag, TagGroup } from "@/shim-ui/tag-group";

export default () => (
  <TagGroup label="Labels">
    <Tag>Bug</Tag>
    <Tag>Feature</Tag>
    <Tag>Chore</Tag>
  </TagGroup>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add tag-group

Selection

Set selectionMode to allow single or multiple tag selection.

News
Travel
Gaming
Selection example
"use client";
import { useState } from "react";
import type { Selection } from "react-aria-components";
import { Tag, TagGroup } from "@/shim-ui/tag-group";

export default () => {
  let [selected, setSelected] = useState<Selection>(new Set(["travel"]));

  return (
    <TagGroup
      aria-label="Categories"
      onSelectionChange={setSelected}
      selectedKeys={selected}
      selectionMode="multiple"
    >
      <Tag id="news">News</Tag>
      <Tag id="travel">Travel</Tag>
      <Tag id="gaming">Gaming</Tag>
    </TagGroup>
  );
};

Removing

Handle tag removal by providing an onRemove callback.

News
Travel
Gaming
Shopping
Removing example
"use client";
import { useListData } from "react-stately";
import { Tag, TagGroup } from "@/shim-ui/tag-group";

export default () => {
  let list = useListData({
    initialItems: [
      { id: 1, name: "News" },
      { id: 2, name: "Travel" },
      { id: 3, name: "Gaming" },
      { id: 4, name: "Shopping" },
    ],
  });

  return (
    <TagGroup
      aria-label="Categories"
      items={list.items}
      onRemove={(keys) => list.remove(...keys)}
      renderEmptyState={() => <div className="p-2">No items</div>}
    >
      {(item) => <Tag>{item.name}</Tag>}
    </TagGroup>
  );
};

Color

Use the color prop to change the tag appearance.

Group color
Bug
Feature
Chore
Individual colors
Bug
Feature
Chore
Color example
import { Tag, TagGroup } from "@/shim-ui/tag-group";

export default () => (
  <>
    <TagGroup color="blue" label="Group color" selectionMode="multiple">
      <Tag>Bug</Tag>
      <Tag>Feature</Tag>
      <Tag>Chore</Tag>
    </TagGroup>

    <TagGroup label="Individual colors" selectionMode="multiple">
      <Tag color="red">Bug</Tag>
      <Tag color="green">Feature</Tag>
      <Tag color="orange">Chore</Tag>
    </TagGroup>
  </>
);

Size

Adjust the size prop to match the desired scale.

Size 1
Bug
Feature
Chore
Size 2
Bug
Feature
Chore
Size 3
Bug
Feature
Chore
Size 4
Bug
Feature
Chore
Size example
"use client";
import { Tag, TagGroup } from "@/shim-ui/tag-group";

export default () =>
  ([1, 2, 3, 4] as const).map((size) => (
    <TagGroup
      key={size}
      label={`Size ${size}`}
      onRemove={() => {
        /*noop*/
      }}
      size={size}
    >
      <Tag>Bug</Tag>
      <Tag>Feature</Tag>
      <Tag>Chore</Tag>
    </TagGroup>
  ));