TagGroup

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

Source Reference API Reference

Usage#

Demo#

import { Tag, TagGroup } from "pigment-ui";

function TagGroupDemo() {
  return (
    <TagGroup label="Categories" description="Lorem ipsum dolor sit amet.">
      <Tag>News</Tag>
      <Tag>Travel</Tag>
      <Tag>Gaming</Tag>
      <Tag>Shopping</Tag>
    </TagGroup>
  );
}

Selection#

import { Tag, TagGroup } from "pigment-ui";

function TagGroupSelection() {
  return (
    <TagGroup selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
      <Tag>News</Tag>
      <Tag>Travel</Tag>
      <Tag>Gaming</Tag>
      <Tag>Shopping</Tag>
    </TagGroup>
  );
}

Color#

import { Tag, TagGroup } from "pigment-ui";

function TagGroupColor() {
  return (
    <div className="flex flex-col gap-4">
      <TagGroup color="default" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>

      <TagGroup color="primary" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>

      <TagGroup color="info" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>

      <TagGroup color="success" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>
      
      <TagGroup color="warning" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>
      
      <TagGroup color="error" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>      
    </div>
  );
}

Size#

import { Tag, TagGroup } from "pigment-ui";

function TagGroupSize() {
  return (
    <div className="flex flex-col gap-4">
      <TagGroup size="sm" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>

      <TagGroup size="md" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>

      <TagGroup size="lg" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>
    </div>
  );
}

Radius#

import { Tag, TagGroup } from "pigment-ui";

function TagGroupRadius() {
  return (
    <div className="flex flex-col gap-4">
      <TagGroup radius="sm" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>

      <TagGroup radius="md" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>

      <TagGroup radius="lg" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>

      <TagGroup radius="full" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>

      <TagGroup radius="none" selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
        <Tag>News</Tag>
        <Tag>Travel</Tag>
        <Tag>Gaming</Tag>
        <Tag>Shopping</Tag>
      </TagGroup>
    </div>
  );
}

Remove#

import { Tag, TagGroup } from "pigment-ui";
import { useListData } from "@react-stately/data";

function TagGroupColor() {
  const list = useListData({
    initialItems: [
      { id: 1, name: "News" },
      { id: 2, name: "Travel" },
      { id: 3, name: "Gaming" },
      { id: 4, name: "Shopping" },
    ],
  });

  return (
    <TagGroup
      items={list.items}
      onRemove={(keys) => list.remove(...keys)}
      renderEmptyState={() => 'No categories.'}
      selectionMode="multiple"
      label="Categories"
      description="Lorem ipsum dolor sit amet."
    >
      {(item) => <Tag>{item.name}</Tag>}
    </TagGroup>
  );
}

Disabled#

import { Tag, TagGroup } from "pigment-ui";

function TagGroupDisabled() {
  return (
    <TagGroup disabledKeys={["Travel"]} selectionMode="multiple" label="Categories" description="Lorem ipsum dolor sit amet.">
      <Tag>News</Tag>
      <Tag>Travel</Tag>
      <Tag>Gaming</Tag>
      <Tag>Shopping</Tag>
    </TagGroup>
  );
}

Edit this page

Tabs TextArea