# Accordion

Stacked headings that each reveal a panel, in three looks: Classic, Soft and Editorial.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/accordion
```

## Usage

```tsx
import { Accordion } from '@/components/fetaui/accordion'

const items = [{ value: 'reset', title: 'How do I reset my password?', children: 'Click Forgot password.' }]

export function Example() {
  return <Accordion styleKind="soft" items={items} defaultValue={['reset']} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| items | AccordionItem[] | required |
| styleKind | classic, soft, editorial | classic |
| type | single, multiple | single |
| value | string[] |  |
| defaultValue | string[] | [] |
| onValueChange | (value) => void |  |
| header | { title, meta } |  |
| headingLevel | 2 to 6 | 3 |
| onLocked | (value) => void |  |
| animated | boolean | true |
| labelMotion | roll, draw, none | roll |
| item.disabled | boolean | false |
| item.loading | boolean | false |
| item.locked | boolean | false |

## When to use

- Classic for settings and FAQs inside cards or pages.
- Soft when the accordion is the surface, with a header naming the group.
- Editorial for short, scannable lists on marketing pages.

## When not to use

- For anything people need to compare side by side: use Tabs or a table.
- For one disclosure on its own: use Collapsible.

## Accessibility

- Each trigger is a button in a heading with aria-expanded and aria-controls.
- The panel is a region labelled by its trigger.
- Disabled uses aria-disabled and is skipped. Loading sets aria-busy.
- Locked items stay focusable and open your upsell.

## Motion

- The panel grows in 260 ms, then content fades and rises 4 px after 60 ms.
- The chevron turns 180 degrees in 200 ms and the Soft card lifts in 200 ms.
- Titles roll to a copy of themselves on hover and focus, as in FAQ · Boxed.
- Closing runs shorter: content first in 120 ms, then height in 180 ms.
- Editorial opens after 120 ms of hover intent, in 300 ms.
- A locked trigger nudges 3 px in 240 ms before the upsell.
- With reduced motion, height jumps, content crossfades in 120 ms and the loader spins at half speed.