# Toggle group

> On/off choices side by side whose fills merge: two pressed toggles next to each other square off their inner corners and read as one shape.

Toggle groups usually show each pressed button as its own pill, so Bold and Italic look like two blobs. Here pressed neighbours join: the corners between them ease square, so they read as one shape. A single Toggle is exported too.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/toggle-group.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/toggle-group
- Registry item (source): https://hairlineui.com/r/toggle-group.json

## Usage

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

<ToggleGroup label="Format" defaultValue={["bold"]} options={[
  { value: "bold", label: "Bold", icon: <Bold />, iconOnly: true },
  { value: "italic", label: "Italic", icon: <Italic />, iconOnly: true },
]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `ToggleOption[]` | – | value, label, icon, iconOnly, disabled. |
| `value / defaultValue` | `string[]` | – | Pressed values. |
| `onValueChange` | `(value: string[]) => void` | – | Called on change. |
| `label` | `string` | – | Accessible name. |
| `size` | `"sm" \| "md"` | `"md"` | 28px or 36px bar. |
| `Toggle` | `{ pressed, defaultPressed, onPressedChange }` | – | One toggle button. |

## States

- **press**: The fill fades in (220ms); it gives under the finger.
- **merge**: Corners shared with a pressed neighbour square off (320ms).

## What it handles

Multi-select toggles need to show which are on and how they relate; merging adjacent fills does that with no extra UI.

- **Merging fills**: Inner corners ease from round to 4px (320ms).
- **aria-pressed**: Each toggle is a real pressed button.
- **Icons or words**: iconOnly options keep their label as the name.
- **Toggle**: A single pressed/unpressed button with the same look.

## Replaces

Radix ToggleGroup, Toggle

## Where it fits

- **Text formatting**: Bold, italic, underline together.
- **Filters**: Several categories on at once.
- **Days of the week**: Pick the days a schedule runs.
- **View options**: Show grid, show rulers.

## Notes

- For one choice, use the segmented control.
- Reduced motion: fills and corners change at once.

License: MIT (https://hairlineui.com/license#components)