Tags

A group of chip-style tags built with React Aria that a user can select, filter by, or remove, with optional avatars, status dots, and counts.

Proper UI

byproperui

"use client";

import { Tag, TagGroup, type TagItem, TagList } from "@/components/ui/tags";
import { useState } from "react";
import type { Selection as AriaSelection } from "react-aria-components";

const AU_FLAG =
  "https://cdn.21st.dev/assets/localized/cbb2206c5e59a25d79228306af973666a191e163f0ae337681f447977e6edb18.svg";
const AVATAR_SRC =
  "https://cdn.21st.dev/assets/localized/aef1dddf3f0a7db7576b169903741465d2f7afebd0666243376970fa95f6e00a.svg";

export default function SelectableClosableTagsDemo() {
  const [selectedTags, setSelectedTags] = useState<AriaSelection>(
    new Set(["tag-01", "tag-02"]),
  );
  const [tags, setTags] = useState<TagItem[]>([
    { id: "tag-01", label: "Label" },
    {
      id: "tag-02",
      label: "Label",
      avatarSrc: AU_FLAG,
      avatarContrastBorder: false,
    },
    { id: "tag-03", label: "Label", avatarSrc: AVATAR_SRC },
    { id: "tag-04", label: "Label", dot: true },
  ]);

  return (
    <TagGroup
      label="Tags"
      size="md"
      selectionMode="multiple"
      selectedKeys={selectedTags}
      onSelectionChange={setSelectedTags}
      onRemove={(keys) => {
        setTags(tags.filter((tag) => !keys.has(tag.id)));
      }}
    >
      <TagList
        className="flex flex-col items-start gap-4 md:flex-row"
        items={tags}
      >
        {(item) => <Tag {...item}>{item.label}</Tag>}
      </TagList>
    </TagGroup>
  );
}