Legacy (shadcn-uikit)Components
Toggle Group
A group of toggle buttons where one or multiple items can be pressed.
Usage
import { ToggleGroup, ToggleGroupItem } from '@acronis-platform/shadcn-uikit';<ToggleGroup type="single" defaultValue="center">
<ToggleGroupItem value="left" aria-label="Align left">
Left
</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center">
Center
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right">
Right
</ToggleGroupItem>
</ToggleGroup>Overview
Built on Base UI's ToggleGroup and Toggle primitives, this component provides a set of related toggle buttons. Items display a pressed state via data-[pressed] styling, and the group handles single or multiple selection logic.
API Reference
ToggleGroup
Wraps Base UI's ToggleGroup. Accepts all props from the underlying primitive.
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | — | Whether one or multiple items can be pressed. |
value | string | string[] | — | Controlled pressed value(s). |
defaultValue | string | string[] | — | Initial pressed value(s) when uncontrolled. |
className | string | — | Additional CSS class names. |
ToggleGroupItem
Wraps Base UI's Toggle. Each item represents a pressable option within the group.
| Prop | Type | Description |
|---|---|---|
value | string | Unique value identifying this toggle item. |
disabled | boolean | Disables this toggle item. |
className | string | Additional CSS class names. |