Components
Loading preview...
A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal. A static tag list can be built using <ul> or <ol> HTML elements, but does not support any user interactions. HTML lists are meant for static content, rather than lists with rich interactions such as keyboard navigation, item selection, removal, etc. TagGroup helps achieve accessible and interactive tag list components that can be styled as needed.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/tag-groupimport { Label } from "@/components/ui/field"
import { Tag, TagGroup, TagList } from "@/components/ui/tag-group"
export function TagGroupDemo() {
return (
<TagGroup className="space-y-1" selectionMode="multiple">
<Label>Categories</Label>
<TagList>
<Tag>News</Tag>
<Tag>Travel</Tag>
<Tag>Gaming</Tag>
<Tag>Shopping</Tag>
</TagList>
</TagGroup>
)
}