# Accordion

> Stacked sections that open and close in place: one at a time or several, on glass or plain hairlines.

Category: Layout and surfaces. Docs page: https://rime.mjsons.net/components/accordion

## Installation

```bash
npx shadcn@latest add KezLahd/rime/accordion
```

Accordion holds a list of questions, settings groups or details where people read one section at a time. type="single" keeps one section open (collapsible lets the open one close again); type="multiple" lets any number stay open.

Each header is a real heading (headingLevel, default h3) holding a button, so the page outline stays right. The panel animates its height with a grid-row transition, with no measuring, and reduced motion makes it instant. Closed panels are inert, so their links leave the tab order.

appearance="glass" is a frosted panel with hairlines between sections; "plain" is hairlines only, for use inside a Card or GlassPanel that already provides the surface.

## Usage

```tsx
import { Accordion } from "@/components/ui";

<Accordion
  defaultValue={["billing"]}
  items={[
    { id: "billing", title: "When is an invoice issued?", content: "On the first working day of each month." },
    { id: "seats", title: "Can I add a team member mid-cycle?", content: "Yes, from the day it is added." },
  ]}
/>
```

## Props: Accordion

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `ReadonlyArray<AccordionItem>` |  |  |
| `type` | `"single" \| "multiple"` | `"single"` | single = one section open at a time. multiple = any number. |
| `value` | `ReadonlyArray<string>` |  | Open ids, controlled. Pair with onValueChange. |
| `defaultValue` | `ReadonlyArray<string>` |  | Open ids on first render, uncontrolled. |
| `onValueChange` | `(value: string[]) => void` |  |  |
| `collapsible` | `boolean` | `true` | single only: false keeps one section open at all times. |
| `headingLevel` | `2 \| 3 \| 4 \| 5` | `3` | Heading level the triggers sit in, to fit the page outline. |
| `appearance` | `"glass" \| "plain"` | `"glass"` | glass = a frosted panel with hairlines between sections. plain = hairlines only. |
| `className` | `string` |  |  |

## Examples

### Single, one open

```tsx
<Accordion items={FAQ} defaultValue={["billing"]} />
```

### Multiple open

type="multiple": opening one section leaves the others as they are.

```tsx
<Accordion type="multiple" items={FAQ} defaultValue={["billing", "seats"]} />
```

### Plain, inside a surface

```tsx
<Card title="Help">
  <Accordion appearance="plain" items={FAQ} />
</Card>
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--accordion-pad-x` | `calc(16px * var(--density))` |
| `--accordion-pad-y` | `calc(14px * var(--density))` |
| `--accordion-radius` | `var(--r-lg)` |
| `--accordion-width` | `min(560px, 100%)` |

System tokens it reads: `--blur-panel-light`, `--border-w`, `--density`, `--dur`, `--dur-slow`, `--ease`, `--ease-out`, `--focus-color`, `--glass-edge`, `--glass-fill-nested`, `--ink-body`, `--ink-brand`, `--ink-disabled`, `--ink-heading`, `--ink-muted`, `--line`, `--line-glass`, `--r-lg`, `--shadow-hairline-card`, `--shadow-specular`, `--text-body`, `--text-small`, `--wash-hover`.

## Accessibility

- WAI-ARIA accordion: each trigger is a <button> inside a heading, with aria-expanded and aria-controls; each panel is a region labelled by its trigger.
- Up and Down move focus between headers, Home and End jump to the first and last; Enter and Space toggle.
- Closed panels are inert, so nothing hidden can take focus.
- Focus shows as a 2px accent outline inset in the row.

## Do

- Write titles as the question or the name of the group, so a closed list scans.
- Open the most useful section by default with defaultValue.

## Don't

- Don't hide required form fields in a closed section.
- Don't nest accordions; use headings and a longer page instead.

Related: https://rime.mjsons.net/components/collapsible, https://rime.mjsons.net/components/card