# rn-toggle-group
URL: /docs/native/components/toggle-group

Segmented control component for single or multiple option selection.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-toggle-group
```

## Usage

```tsx
import { ToggleGroup, ToggleGroupItem } from '@/components/docyrus-native/toggle-group';

  
  

```

## API Reference

### ToggleGroup

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `'single' \| 'multiple'` | `'single'` | Selection mode |
| `value` | `string \| string[]` | — | Selected value(s) |
| `onValueChange` | `(value: string \| string[]) => void` | — | Value change handler |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Item size |
| `variant` | `'default' \| 'outline'` | `'default'` | Visual variant |
| `disabled` | `boolean` | `false` | Disable all items |
| `children` | `ReactNode` | — | ToggleGroupItem elements |
| `className` | `string` | — | Additional CSS classes |

### ToggleGroupItem

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | — | Item value (required) |
| `children` | `ReactNode` | — | Item content |
| `disabled` | `boolean` | `false` | Disable this item |
| `className` | `string` | — | Item CSS classes |
| `textClassName` | `string` | — | Text CSS classes |

## Components

| Component | Description |
|-----------|-------------|
| `ToggleGroup` | Root container with context provider |
| `ToggleGroupItem` | Individual toggle item |

## Type Exports

| Type | Description |
|------|-------------|
| `ToggleGroupProps` | Props for ToggleGroup |
| `ToggleGroupItemProps` | Props for ToggleGroupItem |
| `ToggleGroupType` | `'single' \| 'multiple'` |
| `ToggleGroupSize` | `'sm' \| 'md' \| 'lg'` |
| `ToggleGroupVariant` | `'default' \| 'outline'` |