# Toggle group

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Props / API

### `ToggleGroup`

| Prop            | Type                        | Default | Description                                                                               |
| --------------- | --------------------------- | ------- | ----------------------------------------------------------------------------------------- |
| `value`         | `string[]`                  | -       | Controlled pressed state: an array of the values of all pressed buttons.                  |
| `onValueChange` | `(value: string[]) => void` | -       | Called when the set of pressed buttons changes; receives the new array of pressed values. |

Extends Base UI `ToggleGroup.Props`, so it also inherits `defaultValue`, `multiple` (default `false`), `disabled` (default `false`), `orientation` (default `"horizontal"`), and `loopFocus` (default `true`), plus Base UI's `render` and all standard `<div>` attributes. All are forwarded via `...rest`.

### `ToggleGroup.Button`

Individual toggle button within the group.

| Prop    | Type     | Default | Description                                                  |
| ------- | -------- | ------- | ------------------------------------------------------------ |
| `value` | `string` | -       | Required. Unique identifier for the button within the group. |

Extends Base UI `Toggle.Props<string>` (with `value` required), so it also inherits `disabled` (default `false`), plus Base UI's `render` and all standard `<button>` attributes. All are forwarded via `...rest`.

## States

- Default (idle)
- Hover
- Focus-visible
- Pressed (selected)
- Disabled (per button or whole group)

## Code examples

```tsx
import { useState } from "react";
import { ToggleGroup } from "@mylighthouse/prism-react";

export default function ToggleGroupExample(): React.JSX.Element {
  const [view, setView] = useState<string[]>(["pricing"]);

  return (
    <ToggleGroup aria-label="View" onValueChange={setView} value={view}>
      <ToggleGroup.Button value="pricing">Pricing</ToggleGroup.Button>
      <ToggleGroup.Button value="rate-shopper">Rate Shopper</ToggleGroup.Button>
    </ToggleGroup>
  );
}
```

## A11y intent

_[Design to fill]_

- The group exposes a `role="group"`. Always give it an accessible name via `aria-label` (or `aria-labelledby`) so its purpose is announced.
- Each button's pressed state is exposed to assistive technology.
- Keyboard: arrow keys move focus between buttons following `orientation`, and `loopFocus` (default `true`) wraps focus at the ends. Space/Enter toggles the focused button.
- Icon-only buttons must carry an `aria-label` so their purpose is announced.
- Disabled buttons stay in the accessibility tree so their state is announced.