A badge group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
import { BadgeGroup, BadgeGroupItem } from "@/components/ui/badge-group";
export function BadgeGroupDemo() {Installation#
pnpm dlx shadcn@latest add junwen-k/ui-x/badge-group
Usage#
import { BadgeGroup, BadgeGroupItem } 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#
import { BadgeGroup, BadgeGroupItem } from "@/components/ui/badge-group";
export function BadgeGroupDemo() {Form#
Select your favorite flavors, or remove the ones you dislike.
"use client";
import * as React from "react";Accessibility#
The group is built on Base UI Toggle Group: one item is tabbable at a time, the arrow keys move focus between items, and Space or Enter toggles the focused item. When removal is enabled, Backspace and Delete remove the focused item — the close icon is a pointer-only affordance hidden from assistive technology, so keyboard and screen-reader users are not dependent on it.
API Reference#
BadgeGroup#
The group container. Renders a Base UI Toggle Group.
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | Whether one or several items can be pressed at a time. Determines the value type below. |
value | string | string[] | - | The pressed item(s), typed by type. Use for controlled value. |
defaultValue | string | string[] | - | The initial value when uncontrolled. |
onValueChange | (value) => void | - | Called when the pressed item(s) change. The value is typed by type. |
onRemove | (value) => void | - | Enables removal. Called with the removed value(s) when an item's close icon is clicked or Backspace / Delete is pressed. |
...props | ToggleGroup.Props | - | Remaining props are spread to Base UI Toggle Group. |
BadgeGroupItem#
A single badge. Renders a Base UI Toggle styled as an outline Badge. Shows a close icon when the group has onRemove.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The item's value within the group. Required. |
...props | Toggle.Props | - | Remaining props are spread to Base UI Toggle. |