Toggle Group

Installation

npx shadcn@latest add @fujin/toggle-group

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

<ToggleGroup
  aria-label="Text alignment"
  defaultValue={["left"]}
  variant="outline"
>
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeftIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenterIcon />
  </ToggleGroupItem>
</ToggleGroup>

What's different from shadcn/ui

• The value is always an array. Base UI has no type="single" | "multiple" prop: single selection is the default and still uses value={["left"]}; pass multiple to allow several pressed items. onValueChange receives string[] either way.
• In single mode, clicking the pressed item unpresses it (the value becomes []). To require a selection, ignore empty changes in onValueChange - see the demo.
• variant and size on the group flow to every item via context, but an item's own variant/size wins.
• spacing={0} (the default) joins items into one segmented control; any other number is a gap in Tailwind spacing units.
• orientation="vertical" stacks the items and switches arrow-key navigation to Up/Down.

API Reference

Every other prop is forwarded to the Base UI ToggleGroup; items forward to Toggle.