Docs
Badge Group

Badge Group

A badge group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.

DocsAPI Reference

Installation

npx shadcn@latest add https://ui-x.junwen-k.dev/r/badge-group.json

Usage

import { BadgeGroup, BadgeItem } from "@/components/ui/badge-group"
<BadgeGroup type="single">
  <BadgeGroupItem value="chocolate">Chocolate</BadgeGroupItem>
  <BadgeGroupItem value="mint">Mint</BadgeGroupItem>
  <BadgeGroupItem value="strawberry">Strawberry</BadgeGroupItem>
  <BadgeGroupItem value="vanilla">Vanilla</BadgeGroupItem>
</BadgeGroup>

Examples

Default

Form

Password InputCalendar