# Collapsible

A region that expands and collapses. Compose three parts: `Collapsible` (state
owner), `CollapsibleTrigger` (toggles it), and `CollapsibleContent` (the
animated-height body).

Open state can be controlled (`open` + `onOpenChange`) or uncontrolled
(`defaultOpen`). The trigger accepts `asChild` to reuse your own button/element.

## Props

### `Collapsible`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | — | Controlled open state. Omit for uncontrolled. |
| `defaultOpen` | `boolean` | `false` | Initial state when uncontrolled. |
| `onOpenChange` | `(open: boolean) => void` | — | Fired with the next state on toggle. |
| `disabled` | `boolean` | `false` | Blocks toggling. |

### `CollapsibleTrigger`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Render the single child as the trigger, merging handlers/classes. |

### `CollapsibleContent`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | Classes on the inner content element. |