# Toggle Group

Group of toggle buttons for single or multiple selection. A highlight glides between choices, or neighbouring picks join into one continuous run.

> Primitive · Free · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add toggle-group
```

## Import

```tsx
import { ToggleGroupItem, ToggleGroup } from "@/components/ui/toggle-group/toggle-group";
```

## Variants

- `multiple` — Multiple: `npx @lumioui/cli add toggle-group-multiple`
- `single` — Single: `npx @lumioui/cli add toggle-group-single`

## Props

### ToggleGroup

| Prop | Type | Notes |
| --- | --- | --- |
| `type` | `"single" | "multiple"` | Single select or multiple select. |
| `value?` | `string | string[]` | Controlled selected value(s). Omit with defaultValue for uncontrolled use. |
| `defaultValue?` | `string | string[]` | Initial value(s) for uncontrolled use. |
| `onValueChange?` | `(value: string | string[]) => void` | Called when the selection changes. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### ToggleGroupItem

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | — |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |
| `textClassName?` | `string` | Extra classes for a string label (weight, style, decoration). |
| `children?` | `React.ReactNode` | — |

Source: https://lumioui.com/components/toggle-group