HeroUI Tag Group

Forms 1

About

HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Tag Group to your project and fits it to your theme.

Code

How HeroUI Tag Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import type { Key } from "@heroui/react"
import { useMemo, useState } from "react"
import {
  Description,
  ErrorMessage,
  Label,
  Tag,
  TagGroup,
} from "@/components/ui/heroui-tag-group"

export default function TagGroupWithErrorMessage() {
  const [selected, setSelected] = useState<Iterable<Key>>(new Set())

  const isInvalid = useMemo(() => Array.from(selected).length === 0, [selected])

  return (
    <TagGroup
      selectedKeys={selected}
      selectionMode="multiple"
      onSelectionChange={(keys) => setSelected(keys)}
    >
      <Label>Amenities</Label>
      <TagGroup.List>
        <Tag id="laundry">Laundry</Tag>
        <Tag id="fitness">Fitness center</Tag>
        <Tag id="parking">Parking</Tag>
        <Tag id="pool">Swimming pool</Tag>
        <Tag id="breakfast">Breakfast</Tag>
      </TagGroup.List>
      <Description>
        {isInvalid
          ? "Select at least one category"
          : "Selected: " + Array.from(selected).join(", ")}
      </Description>
      <ErrorMessage>{!!isInvalid && <>Please select at least one category</>}</ErrorMessage>
    </TagGroup>
  )
}