TagGroup

Import

import { TagGroup } from "@thenamespace/uikit";

Usage

"use client";

import { Tag, TagGroup } from "@thenamespace/uikit";
import {
  Globe02Icon,

Anatomy

import {
  TagGroup,
  Tag,
  Label,
  Description,
  ErrorMessage,
} from "@thenamespace/uikit";

export default () => (
  <TagGroup>
    <Label />
    <TagGroup.List>
      <Tag>
        <Tag.RemoveButton />
      </Tag>
    </TagGroup.List>
    <Description />
    <ErrorMessage />
  </TagGroup>
);

Sizes

"use client";

import {Label, Tag, TagGroup} from "@thenamespace/uikit";

export function TagGroupSizes() {

Variants

"use client";

import {Label, Tag, TagGroup} from "@thenamespace/uikit";

export function TagGroupVariants() {

Disabled

"use client";

import {Description, Label, Tag, TagGroup} from "@thenamespace/uikit";

export function TagGroupDisabled() {

Selection Modes

"use client";

import type {Key} from "@thenamespace/uikit";

import {Description, Label, Tag, TagGroup} from "@thenamespace/uikit";

Controlled

"use client";

import type {Key} from "@thenamespace/uikit";

import {Description, Label, Tag, TagGroup} from "@thenamespace/uikit";

With Error Message

"use client";

import type {Key} from "@thenamespace/uikit";

import {Description, ErrorMessage, Label, Tag, TagGroup} from "@thenamespace/uikit";

With Prefix

"use client";

import { Avatar, Description, Label, Tag, TagGroup } from "@thenamespace/uikit";
import {
  Globe02Icon,

With Remove Button

"use client";

import type { Key } from "@thenamespace/uikit";

import { useState } from "react";

With List Data

"use client";

import type {Key} from "@thenamespace/uikit";

import {Avatar, Description, EmptyState, Label, Tag, TagGroup, useListData} from "@thenamespace/uikit";

Custom Render Function

"use client";

import { Tag, TagGroup } from "@thenamespace/uikit";
import {
  Globe02Icon,

Styling

Passing Tailwind CSS classes

import { TagGroup, Tag, Label } from "@thenamespace/uikit";

function CustomTagGroup() {
  return (
    <TagGroup className="w-full">
      <Label>Categories</Label>
      <TagGroup.List className="gap-2">
        <Tag className="rounded-lg px-4 py-2 font-bold">Custom Styled</Tag>
      </TagGroup.List>
    </TagGroup>
  );
}

Customizing the component classes

To customize the TagGroup component classes, you can use the @layer components directive.

Learn more.

@layer components {
  .tag-group {
    @apply flex flex-col gap-2;
  }

  .tag-group__list {
    @apply flex flex-wrap gap-2;
  }

  .tag {
    @apply rounded-full px-3 py-1;
  }

  .tag__remove-button {
    @apply ml-1;
  }
}

Namespace UIKit follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The TagGroup component uses these CSS classes:

Base Classes

• .tag-group - Base tag group container
• .tag-group__list - Container for the list of tags
• .tag - Base tag styles
• .tag__remove-button - Remove button trigger

Slot Classes

• .tag-group [slot="description"] - Description slot styles
• .tag-group [slot="errorMessage"] - ErrorMessage slot styles

Size Classes

• .tag--sm - Small size tag
• .tag--md - Medium size tag (default)
• .tag--lg - Large size tag

Variant Classes

• .tag--default - Default variant
• .tag--surface - Surface variant with surface background

State Classes

• .tag[data-selected="true"] - Selected tag state
• .tag[data-disabled="true"] - Disabled tag state
• .tag[data-hovered="true"] - Hovered tag state
• .tag[data-pressed="true"] - Pressed tag state
• .tag[data-focus-visible="true"] - Focused tag state (keyboard focus)

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

• Hover: :hover or [data-hovered="true"] on tag
• Focus: :focus-visible or [data-focus-visible="true"] on tag
• Pressed: :active or [data-pressed="true"] on tag
• Selected: [data-selected="true"] or [aria-selected="true"] on tag
• Disabled: :disabled or [data-disabled="true"] on tag

API Reference

TagGroup Props

TagGroup.List Props

Tag Props

Note: size, variant are inherited from the parent TagGroup component and cannot be set directly on individual Tag components.

Tag.RemoveButton Props

Note: The Tag.RemoveButton component supports customization similar to SearchField.ClearButton. When onRemove is provided to TagGroup:

• Auto-rendering: If no custom Tag.RemoveButton is included in the Tag children, a default remove button is automatically rendered.
• Custom button: If a custom Tag.RemoveButton is provided as a child of Tag, it will be used instead of the auto-rendered button.
• Custom icon: You can pass custom content (like icons) to Tag.RemoveButton children to customize the appearance.

Example - Auto-rendered (default):

<TagGroup onRemove={handleRemove}>
  <TagGroup.List>
    <Tag id="news">News</Tag>
    {/* Remove button is automatically rendered */}
  </TagGroup.List>
</TagGroup>

Example - Custom RemoveButton with icon:

<TagGroup onRemove={handleRemove}>
  <TagGroup.List>
    <Tag id="news">
      News
      <Tag.RemoveButton>
        <CustomIcon />
      </Tag.RemoveButton>
    </Tag>
  </TagGroup.List>
</TagGroup>

Example - Custom RemoveButton in render props:

<Tag id="news">
  {(renderProps) => (
    <>
      News
      {!!renderProps.allowsRemoving && (
        <Tag.RemoveButton>
          <CustomIcon />
        </Tag.RemoveButton>
      )}
    </>
  )}
</Tag>

RenderProps

When using render functions with TagGroup.List, these values are provided: