# Accordion

Stacked disclosure panels built on React Aria `DisclosureGroup`. Use the compound
`Accordion.Item`, `Accordion.Trigger`, and `Accordion.Panel` API for FAQ and settings
layouts. For a single standalone panel, use [`Collapsible`](/components/collapsible).

## Examples

### Default

```tsx
import { Accordion } from '@var-ui/react';

<Accordion type="single" defaultExpandedKeys={['billing']}>
  <Accordion.Item id="billing">
    <Accordion.Trigger>Billing</Accordion.Trigger>
    <Accordion.Panel>…</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item id="shipping">
    <Accordion.Trigger>Shipping</Accordion.Trigger>
    <Accordion.Panel>…</Accordion.Panel>
  </Accordion.Item>
</Accordion>
```

```astro
---
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionPanel,
} from '@var-ui/astro';
---

<Accordion type="single">
  <AccordionItem id="billing" defaultExpanded>
    <AccordionTrigger>Billing</AccordionTrigger>
    <AccordionPanel>…</AccordionPanel>
  </AccordionItem>
</Accordion>
```

```html
<div class="var-ui-accordion-group">…</div>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  |  |
| className | string \| undefined | no |  |  |
| collapsible | boolean \| undefined | no | true | When `type` is `single`, allow closing every panel. |
| defaultExpandedKeys | Iterable<Key> \| undefined | no |  |  |
| expandedKeys | Iterable<Key> \| undefined | no |  |  |
| isDisabled | boolean \| undefined | no |  |  |
| onExpandedChange | ((keys: Set<Key>) => void) \| undefined | no |  |  |
| type | "multiple" \| "single" \| undefined | no | single | When `single`, only one panel may be open at a time. |
| variant | AccordionGroupVariant \| undefined | no |  |  |

## Accessibility

Each trigger is a button with `aria-expanded`. In single mode, opening one panel
closes the others. Triggers support `Home`, `End`, `ArrowUp`, and `ArrowDown` for
keyboard navigation between sections.