<ToggleButtonGroup>
<ToggleButton>A</ToggleButton>
<ToggleButton>B</ToggleButton>
<ToggleButton>C</ToggleButton>
</ToggleButtonGroup>npx shadcn@latest add @dotui/toggle-button-groupUse toggle button groups to let users toggle between multiple options.
import { ToggleButtonGroup, ToggleButton } from "@/components/ui/toggle-button-group";<ToggleButtonGroup>
<ToggleButton id="left">Left</ToggleButton>
<ToggleButton id="center">Center</ToggleButton>
<ToggleButton id="right">Right</ToggleButton>
</ToggleButtonGroup>A toggle button group allows a user to toggle multiple options, with single or multiple selection.
| Prop | Type | Default | |
|---|---|---|---|
"default" | "quiet" | 'default' | ||
"sm" | "md" | "lg" | 'md' | ||
Orientation | 'horizontal' | ||
boolean | — | ||
ReactNode | function | — | ||
"multiple" | "single" | 'single' | ||
Iterable<Key> | — | ||
Iterable<Key> | — | ||
function | — | ||
boolean | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.