ToggleGroup A single or multi-select group of toggle buttons built on Radix UI ToggleGroup with shared variant/size context and roving keyboard navigation.
The ToggleGroup component provides a group of toggle buttons with either single-select (radio-like) or multi-select (checkbox-like) behavior. Built on Radix UI's ToggleGroup primitive, it shares variant and size context with its items and supports roving tabindex keyboard navigation.
Install the component via the CLI in one command.
npm pnpm yarn bun
npx @work-rjkashyap/unified-ui add toggle-group pnpm dlx @work-rjkashyap/unified-ui add toggle-group npx @work-rjkashyap/unified-ui add toggle-group bunx @work-rjkashyap/unified-ui add toggle-group
If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.
Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.
npm pnpm yarn bun
npm install @work-rjkashyap/unified-ui pnpm add @work-rjkashyap/unified-ui yarn add @work-rjkashyap/unified-ui bun add @work-rjkashyap/unified-ui import { ToggleGroup, ToggleGroupItem, } from "@work-rjkashyap/unified-ui" ; import { AlignLeft, AlignCenter, AlignRight, AlignJustify } from "lucide-react"; <ToggleGroup type="single" defaultValue="center"> <ToggleGroupItem value="left" aria-label="Align left"> <AlignLeft className="size-4" /> </ToggleGroupItem> <ToggleGroupItem value="center" aria-label="Align center"> <AlignCenter className="size-4" /> </ToggleGroupItem> <ToggleGroupItem value="right" aria-label="Align right"> <AlignRight className="size-4" /> </ToggleGroupItem> <ToggleGroupItem value="justify" aria-label="Align justify"> <AlignJustify className="size-4" /> </ToggleGroupItem> </ToggleGroup> import { Bold, Italic, Underline, Strikethrough } from "lucide-react"; <ToggleGroup type="multiple" defaultValue={["bold"]}> <ToggleGroupItem value="bold" aria-label="Bold"> <Bold className="size-4" /> </ToggleGroupItem> <ToggleGroupItem value="italic" aria-label="Italic"> <Italic className="size-4" /> </ToggleGroupItem> <ToggleGroupItem value="underline" aria-label="Underline"> <Underline className="size-4" /> </ToggleGroupItem> <ToggleGroupItem value="strikethrough" aria-label="Strikethrough"> <Strikethrough className="size-4" /> </ToggleGroupItem> </ToggleGroup> {/* Default */} <ToggleGroup type="single" variant="default" defaultValue="grid"> <ToggleGroupItem value="list" aria-label="List view"><List /></ToggleGroupItem> <ToggleGroupItem value="grid" aria-label="Grid view"><LayoutGrid /></ToggleGroupItem> </ToggleGroup> {/* Outline */} <ToggleGroup type="single" variant="outline" defaultValue="grid"> <ToggleGroupItem value="list" aria-label="List view"><List /></ToggleGroupItem> <ToggleGroupItem value="grid" aria-label="Grid view"><LayoutGrid /></ToggleGroupItem> </ToggleGroup> {/* Ghost */} <ToggleGroup type="single" variant="ghost" defaultValue="grid"> <ToggleGroupItem value="list" aria-label="List view"><List /></ToggleGroupItem> <ToggleGroupItem value="grid" aria-label="Grid view"><LayoutGrid /></ToggleGroupItem> </ToggleGroup> {/* Small */} <ToggleGroup type="single" variant="outline" size="sm" defaultValue="cols"> <ToggleGroupItem value="cols" aria-label="Columns"><Columns3 /></ToggleGroupItem> <ToggleGroupItem value="rows" aria-label="Rows"><Rows3 /></ToggleGroupItem> <ToggleGroupItem value="grid" aria-label="Grid"><LayoutGrid /></ToggleGroupItem> </ToggleGroup> {/* Medium */} <ToggleGroup type="single" variant="outline" size="md" defaultValue="cols"> ... </ToggleGroup> {/* Large */} <ToggleGroup type="single" variant="outline" size="lg" defaultValue="cols"> ... </ToggleGroup> Size Height Padding Font Size sm32px 8px 12px md36px 12px 14px lg40px 16px 14px
import { Sun, Moon, Monitor } from "lucide-react"; <ToggleGroup type="single" variant="outline" defaultValue="system"> <ToggleGroupItem value="light"> <Sun className="size-4" /> Light </ToggleGroupItem> <ToggleGroupItem value="dark"> <Moon className="size-4" /> Dark </ToggleGroupItem> <ToggleGroupItem value="system"> <Monitor className="size-4" /> System </ToggleGroupItem> </ToggleGroup> <ToggleGroup type="single" variant="outline" orientation="vertical" defaultValue="grid"> <ToggleGroupItem value="list"> <List className="size-4" /> List view </ToggleGroupItem> <ToggleGroupItem value="grid"> <LayoutGrid className="size-4" /> Grid view </ToggleGroupItem> <ToggleGroupItem value="columns"> <Columns3 className="size-4" /> Column view </ToggleGroupItem> </ToggleGroup> {/* Entire group disabled */} <ToggleGroup type="single" variant="outline" disabled defaultValue="left"> <ToggleGroupItem value="left" aria-label="Align left"><AlignLeft /></ToggleGroupItem> <ToggleGroupItem value="center" aria-label="Align center"><AlignCenter /></ToggleGroupItem> <ToggleGroupItem value="right" aria-label="Align right"><AlignRight /></ToggleGroupItem> </ToggleGroup> {/* Single item disabled */} <ToggleGroup type="single" variant="outline" defaultValue="left"> <ToggleGroupItem value="left" aria-label="Align left"><AlignLeft /></ToggleGroupItem> <ToggleGroupItem value="center" aria-label="Align center" disabled><AlignCenter /></ToggleGroupItem> <ToggleGroupItem value="right" aria-label="Align right"><AlignRight /></ToggleGroupItem> </ToggleGroup> Prop Type Default Description type"single" | "multiple"— Required. Selection mode.valuestring | string[]— Controlled value (string for single, array for multi). defaultValuestring | string[]— Default value for uncontrolled usage. onValueChange(value: string | string[]) => void— Callback fired when the active item(s) change. variant"default" | "outline" | "ghost""default"Visual variant applied to all items. size"sm" | "md" | "lg""md"Size applied to all items. orientation"horizontal" | "vertical""horizontal"Layout orientation of the group. disabledbooleanfalseDisables the entire group. classNamestring— Additional CSS classes.
Prop Type Default Description valuestring— Required. Unique value for this item.variant"default" | "outline" | "ghost"inherited Override the group-level variant for this item. size"sm" | "md" | "lg"inherited Override the group-level size for this item. disabledbooleanfalseDisables this specific item. classNamestring— Additional CSS classes.
Icon-only toggle items must include an aria-label to be accessible to screen readers.
Roving tabindex — Arrow keys move focus between items. Tab moves focus out of the group. Managed by Radix UI.aria-pressed — Radix automatically sets aria-pressed on each item based on selection state.role="group" — Radix applies the correct group role on the root element.Keyboard — Space or Enter toggles the focused item.Disabled — Group-level disabled propagates to all items. Individual items can also be disabled.Focus ring — Visible on keyboard navigation via focus-visible.
Token Usage --secondaryActive item background --foregroundActive item text color --mutedHover background --muted-foregroundInactive item text color --borderOutline variant border color --border-strongActive outline border / focus indicator --duration-fastTransition speed --easing-standardEasing curve for transitions