TagGroupNew

Import

import { TagGroup } from '@heroui/react';

Usage

"use client";

import {PlanetEarth, Rocket, ShoppingBag, SquareArticle} from "@gravity-ui/icons";
import {Tag, TagGroup} from "@heroui/react";

Anatomy

import { TagGroup, Tag, Label, Description, ErrorMessage } from '@heroui/react';

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

Sizes

"use client";

import {Label, Tag, TagGroup} from "@heroui/react";

export function TagGroupSizes() {

Variants

"use client";

import {Description, Form, Label, ListBox, Select, Surface, Tag, TagGroup} from "@heroui/react";

export function TagGroupVariants() {

Disabled

"use client";

import {Description, Label, Tag, TagGroup} from "@heroui/react";

export function TagGroupDisabled() {

Selection Modes

"use client";

import type {Key} from "@heroui/react";

import {Description, Label, Tag, TagGroup} from "@heroui/react";

Controlled

"use client";

import type {Key} from "@heroui/react";

import {Description, Label, Tag, TagGroup} from "@heroui/react";

With Error Message

"use client";

import type {Key} from "@heroui/react";

import {Description, ErrorMessage, Label, Tag, TagGroup} from "@heroui/react";

With Prefix

"use client";

import {PlanetEarth, Rocket, ShoppingBag, SquareArticle} from "@gravity-ui/icons";
import {Avatar, Description, Label, Tag, TagGroup} from "@heroui/react";

With Remove Button

"use client";

import type {Key} from "@heroui/react";

import {CircleXmarkFill} from "@gravity-ui/icons";

With List Data

"use client";

import type {Key} from "@heroui/react";

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

Styling

Passing Tailwind CSS classes

import { TagGroup, Tag, Label } from '@heroui/react';

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;
  }
}

HeroUI 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 (View source styles and tag.css):

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 with field-on-background styling
• .tag--surface - Surface variant with surface background
• .tag--on-surface - On-surface variant for use on surface components
• .tag--on-form-field - On-form-field variant for use within form components

Modifier Classes

• .tag__remove-button--on-surface - Remove button modifier for on-surface variant

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, isOnSurface, and isOnFormField are inherited from the parent TagGroup component and cannot be set directly on individual Tag components.

Tag.RemoveButton Props

RenderProps

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