# Toggle Group

Toggles on one tray, for a single choice or several.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/toggle-group
```

## Usage

```tsx
import { ToggleGroup } from '@/components/fetaui/toggle-group'

const items = [
  { value: 'list', label: 'List' },
  { value: 'board', label: 'Board' },
]

export function ViewPicker() {
  return <ToggleGroup type="single" label="View" items={items} defaultValue="list" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| type | single, multiple | required |
| label | string | required |
| items | ToggleGroupItem[] | required |
| value | string or string[] |  |
| defaultValue | string or string[] |  |
| onValueChange | (value) => void |  |
| appearance | segment, outline | segment |
| orientation | horizontal, vertical | horizontal |
| disabled | boolean | false |
| animated | boolean | true |
| ToggleToolbar | label, children, className |  |
| ToggleToolbarSeparator | no props |  |

## When to use

- Single for exclusive options, like alignment.
- Multiple for options that combine, like bold and italic.

## When not to use

- For a setting that applies across the app: use Switch.

## Accessibility

- Single choice is a radio group; multiple choice is a toolbar.
- Icon only items need ariaLabel.

## Motion

- Press scales to 0.96.
- In a single choice group, the lift slides on a spring.
- With reduced motion, the lift fades and nothing slides or scales.