# Accordion

A stack of sections that open in place, one at a time or several: questions and answers, groups of settings, long details. Each section is a row with its title and a caret that turns, and a divider under it.

## Usage

### When to use

- Long pages of questions and answers, or groups of settings the user opens one at a time.
- Details most people skip, kept on the page for those who need them.

### When not to use

- Switching between views of the same content. Use Tabs.
- Content everyone needs. Keep it on the page, open.
- A section inside another accordion section.

## Variants

### type

Set on Accordion. single opens one section at a time; multiple lets several stay open, for settings the user compares.

Values: `single`, `multiple`. Default: `single`.

### headingLevel

Set on Accordion. The heading level of every title: one below the heading the accordion sits under.

Values: `2`, `3`, `4`. Default: `3`.

## Examples

### Questions

```tsx
<Accordion defaultValue="refunds" className="max-w-md">
  <AccordionItem value="refunds">
    <AccordionTrigger>Can I get a refund?</AccordionTrigger>
    <AccordionContent>Yes, within 14 days of your purchase.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="seats">
    <AccordionTrigger>Can I add more people later?</AccordionTrigger>
    <AccordionContent>Add or remove seats at any time from Billing.</AccordionContent>
  </AccordionItem>
</Accordion>
```

### Several open

type multiple keeps every section the user opened.

```tsx
<Accordion type="multiple" headingLevel={4} className="max-w-md">
  <AccordionItem value="email">
    <AccordionTrigger>Email</AccordionTrigger>
    <AccordionContent>Mentions, replies and weekly digests.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="push">
    <AccordionTrigger>Push</AccordionTrigger>
    <AccordionContent>Mentions and replies only.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="sms" disabled>
    <AccordionTrigger>Text messages</AccordionTrigger>
    <AccordionContent>Not available on your plan.</AccordionContent>
  </AccordionItem>
</Accordion>
```

## Do and don't

### Do

- Write titles the user scans for: a question, or the name of a group of settings.
- Set headingLevel to one below the heading the accordion sits under.
- Use type multiple when users compare sections side by side.

### Don't

- Don't hide what everyone needs; keep it on the page.
- Don't use it to switch between views of the same content; use Tabs.
- Don't put an accordion inside an accordion section.

## Props

| Name | Type | Values | Default | Description |
| --- | --- | --- | --- | --- |
| `type` | `enum` | `single`, `multiple` | `single` | Set on Accordion. single opens one section at a time; multiple lets several stay open, for settings the user compares. |
| `collapsible` | `boolean` |  | `true` | Set on Accordion, with type single. The open section closes when its title is pressed again. |
| `defaultValue` | `string` |  |  | Set on Accordion. The value of the section open on first render (an array of values with type multiple). |
| `value` | `string` |  |  | Set on Accordion. The open section, when you control it. Pair it with onValueChange. |
| `onValueChange` | `function` |  |  | Set on Accordion. Called with the open value (or values) when a section opens or closes. |
| `headingLevel` | `enum` | `2`, `3`, `4` | `3` | Set on Accordion. The heading level of every title: one below the heading the accordion sits under. |
| `disabled` | `boolean` |  | `false` | Set on AccordionItem, or on Accordion for every section. The title can't be pressed and dims. |

### Slots

| Name | Required | Description |
| --- | --- | --- |
| `item` | yes | One AccordionItem per section, each with a unique value, an AccordionTrigger and an AccordionContent. |

## Anatomy

| Part | Description |
| --- | --- |
| `root` | Accordion: a column as wide as its parent. |
| `item` | AccordionItem: one section, with a divider under it. |
| `trigger` | AccordionTrigger: the title row, a button inside a heading. At least the md control height, 14px medium text, the caret at the end. |
| `icon` | Tabler ChevronDown, 16px, secondary, at the end of the title; half a turn when open. |
| `content` | AccordionContent: the part that opens, 13px secondary text. |
| `body` | The padded block inside the content, pb-md, so nothing shows while it grows. |

## Accessibility

Role: `region`

| Keys | Action |
| --- | --- |
| `Space, Enter` | Opens or closes the focused section. |
| `ArrowDown, ArrowUp` | Moves focus to the next or previous section title. |
| `Home, End` | Moves focus to the first or last section title. |
| `Tab` | Moves from a title into the open content, then on. |

- Each title is a button with aria-expanded inside a real heading, h3 by default; set headingLevel so it fits the page's outline.
- An open section is a region named by its title.
- The caret is decorative; aria-expanded says whether it is open.
- It opens with a short grow and fade only when the user allows motion, and closes at once.

## Install

```bash
npx shadcn add https://werewolf-ui.vercel.app/r/accordion.json
```

This also adds `styles/werewolf.css`, the tokens every component uses, and any other component it needs. Import that file once in your root CSS, after `@import "tailwindcss"`, with a path relative to that CSS file (from `app/globals.css` it is `@import "../styles/werewolf.css"`).