Toggle Group
A set of two-state buttons that can be toggled on or off. Built on Base UI's toggle group primitive.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- Segmented items merge corners on the reading-start/end (logical rounding + border-inline-start) instead of always the physical left/right
Overview
Installation
Usage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
export function Example() {
return (
<ToggleGroup>
<ToggleGroupItem value="bold" aria-label="Toggle bold">
B
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
I
</ToggleGroupItem>
</ToggleGroup>
)
}Examples
Outline
Set spacing={0} to merge items into one segmented control.