baseui-cnToggle Group
A set of two-state buttons grouped together.
Newformprimitiveinteractive
Loading preview...
Installation
npx baseui-cn add toggle-groupUsage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"<ToggleGroup>
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="size-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="size-4" />
</ToggleGroupItem>
</ToggleGroup>Examples
Outline
Use variant="outline" on the group for bordered items.
Loading preview...
Single selection
A common pattern for alignment or view mode selection.
Loading preview...
Sizes
Pass size to the group to control all items at once.
Loading preview...
Vertical
Use orientation="vertical" for a vertical layout.
Loading preview...
With text labels
Combine icons and text directly inside each item for richer segmented controls.
Loading preview...
API
ToggleGroup
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "default" | Visual style shared with all child items via context |
size | "sm" | "default" | "lg" | "default" | Button size shared with all child items via context |
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction and border-radius joining of adjacent items |
ToggleGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | inherited | Override the visual style from the parent ToggleGroup |
size | "sm" | "default" | "lg" | inherited | Override the button size from the parent ToggleGroup |
API Reference
See the Base UI ToggleGroup documentation for the full API reference, including all props, data attributes, and CSS classes.