Forms
Toggle Group
A set of toggles with single or multiple selection, horizontal or vertical.
Import
tsx
import { ToggleGroup } from "@indoku/ui"Examples
Basic usage
tsx
<ToggleGroup.Root type="single" defaultValue={["center"]}> <ToggleGroup.Item value="left" aria-label="Align left">Left</ToggleGroup.Item> <ToggleGroup.Item value="center" aria-label="Align center">Center</ToggleGroup.Item> <ToggleGroup.Item value="right" aria-label="Align right">Right</ToggleGroup.Item></ToggleGroup.Root>Props
Root
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | single | "single": at most one active. "multiple": any number. |
value | string[] | – | Always an array, even for type="single" (0 or 1 items). |
defaultValue | string[] | – | |
onValueChange | (value: string[]) => void | – | |
variant | "outline" | "ghost" | "subtle" | – | |
size | "sm" | "md" | "lg" | – | |
disabled | boolean | – | |
spacing | number | 2 | Gap between items (spacing token). 0 joins the items (connected borders). |
orientation | "horizontal" | "vertical" | – |
Item
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | – |
* required. Style props and HTML attributes are accepted as well.
Created by @indokudev