Components
Loading preview...
HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-tag-group"use client"
import { Description, Label, Tag, TagGroup } from "@/components/ui/heroui-tag-group"
export default function TagGroupDisabled() {
return (
<div className="flex flex-col gap-4">
<TagGroup selectionMode="single">
<Label>Disabled Tags</Label>
<TagGroup.List>
<Tag isDisabled>News</Tag>
<Tag>Travel</Tag>
<Tag isDisabled>Gaming</Tag>
</TagGroup.List>
<Description>Some tags are disabled</Description>
</TagGroup>
<TagGroup disabledKeys={["travel"]} selectionMode="single">
<Label>Disabled Keys</Label>
<TagGroup.List>
<Tag id="news">News</Tag>
<Tag id="travel">Travel</Tag>
<Tag id="gaming">Gaming</Tag>
</TagGroup.List>
<Description>Tags disabled via disabledKeys prop</Description>
</TagGroup>
</div>
)
}