# Toggle Group

A set of toggles with single or multiple selection, horizontal or vertical.

Group: Forms

## 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 too.