DocsToggle Group
Toggle Group
A set of two-state buttons that can be toggled on or off.
Preview
Single selection
Multiple selection
Installation
npx shadcn@latest add toggle-groupUsage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
<ToggleGroup type="single">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
<ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>Props
type — "single" (one active) | "multiple" (many active)
value / defaultValue — selected item(s)
onValueChange — callback fired on change
variant — "default" | "outline"
size — "default" | "sm" | "lg"
disabled — disables all items
On This Page