ToggleGroup
Group of toggle buttons for single or multiple selection
Preview
Usage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { AlignLeft, AlignCenter, AlignRight } from "lucide-react"
{/* Single selection */}
<ToggleGroup type="single" defaultValue="center">
<ToggleGroupItem value="left" aria-label="Align left">
<AlignLeft className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center">
<AlignCenter className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right">
<AlignRight className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
{/* Multiple selection */}
<ToggleGroup type="multiple" variant="outline">
<ToggleGroupItem value="bold">B</ToggleGroupItem>
<ToggleGroupItem value="italic">I</ToggleGroupItem>
<ToggleGroupItem value="underline">U</ToggleGroupItem>
</ToggleGroup>Set type="single" for radio-style behavior or type="multiple" for checkbox-style. The variant and size props are shared across all items via context.
Install
npx shadcn add @bonsai/toggle-group