# Collapsible

Expand/collapse panel built on React Aria `Disclosure`. Use [`Accordion`](/components/accordion)
for stacked multi-panel layouts, or `CollapsibleGroup` for a lower-level grouping API.

## Examples

### Default

```tsx
import { Collapsible, CollapsibleGroup } from '@var-ui/react';

<CollapsibleGroup>
  <Collapsible id="a" title="Section A" variant="bordered">…</Collapsible>
  <Collapsible id="b" title="Section B" variant="bordered">…</Collapsible>
</CollapsibleGroup>
```

```astro
---
import { Collapsible } from '@var-ui/astro';
---

<Collapsible title="Section" variant="bordered">…</Collapsible>
```

```html
<details class="var-ui-collapsible">…</details>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  |  |
| className | string \| undefined | no |  |  |
| defaultExpanded | boolean \| undefined | no |  | Uncontrolled initial expanded state. |
| id | string \| undefined | no |  | Stable id when used inside `CollapsibleGroup` (maps to RAC `Disclosure` id / expanded keys). |
| isExpanded | boolean \| undefined | no |  | Controlled expanded state. |
| onExpandedChange | ((expanded: boolean) => void) \| undefined | no |  |  |
| title | ReactNode | no |  | Default trigger label when `trigger` is omitted. |
| trigger | ReactNode | no |  | Overrides the default title + chevron trigger contents. |
| variant | CollapsibleVariant \| undefined | no |  |  |

## Accessibility

The trigger is a button with `aria-expanded`; the panel is associated automatically.