# Accordion

> Expandable sections.

## Examples

### Single

```vue
<script setup lang="ts">
const open = ref("shipping");
</script>

<template>
  <UiAccordion v-model="open" class="demo-stack">
    <UiAccordionItem value="shipping" title="How long does shipping take?">
      Orders ship within two business days and arrive in three to five.
    </UiAccordionItem>
    <UiAccordionItem value="returns" title="Can I return an item?">
      Yes — within 30 days, in its original packaging.
    </UiAccordionItem>
    <UiAccordionItem value="warranty" title="Is there a warranty?" disabled>
      Not for this product.
    </UiAccordionItem>
  </UiAccordion>
</template>
```

### Multiple

With `multiple`, several items can be open at once.

```vue
<script setup lang="ts">
const open = ref(["notifications"]);
</script>

<template>
  <UiAccordion v-model="open" multiple class="demo-stack">
    <UiAccordionItem value="notifications" title="Notifications">
      Choose which updates reach your inbox.
    </UiAccordionItem>
    <UiAccordionItem value="privacy" title="Privacy">
      Control who can see your profile.
    </UiAccordionItem>
  </UiAccordion>
</template>
```

## API

### Accordion

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `multiple` | `boolean` | `false` | Allow several items open at once; `v-model` is then a `string[]`. |
| `modelValue` | `string \| string[]` | — | Open item value, or values with `multiple`. |

| Event | Payload | Description |
| --- | --- | --- |
| `update:modelValue` | `[value: string \| string[] \| undefined]` | `v-model:modelValue` update. |

| Slot | Props | Description |
| --- | --- | --- |
| `default` | — | `<AccordionItem>`s. |

### AccordionItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | Identifies the item in the accordion's `v-model`. |
| `title` (required) | `string` | — | Header text. The `title` slot overrides it. |
| `disabled` | `boolean` | `false` | Prevents toggling. |
| `level` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | Heading level wrapping the trigger, to fit the page's outline. |

| Slot | Props | Description |
| --- | --- | --- |
| `default` | — | Panel content. |
| `title` | `{ open: boolean; }` | Replaces the `title` text. |
| `indicator` | `{ open: boolean; }` | Replaces the chevron. |

## Styling

- Parts (`[data-part="…"]`): `accordion`

- Parts (`[data-part="…"]`): `accordion-item`, `accordion-heading`, `accordion-trigger`, `accordion-title`, `accordion-indicator`, `accordion-panel`, `accordion-clip`, `accordion-content`
- State attributes: `data-accordion-open`

## Keyboard

| Keys              | Action                             |
| ----------------- | ---------------------------------- |
| `Enter` / `Space` | Toggle the focused item            |
| `↓` / `↑`         | Move to the next / previous header |
| `Home` / `End`    | Move to the first / last header    |

## Accessibility

- Set `level` so the headers fit your page's heading order.
- Closed panels are skipped by Tab, but the browser's find-in-page still searches them and opens the one it matches.