# Accordion

Height-animated disclosure with a diamond marker that morphs between states.

- Family: Composites, imported from `mizu-ui` or `mizu-ui/composite`
- Docs: https://mizu.user64bit.world/components/accordion
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/composite/Accordion.tsx

## Usage

```tsx
import { Accordion, AccordionItem } from "mizu-ui";

export function Faq() {
  return (
    <Accordion>
      <AccordionItem value="a" title="First question">
        The answer, revealed with a 450ms expo height animation.
      </AccordionItem>
    </Accordion>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/accordion
```

## Props

- `allowMultiple`: `boolean` (default `false`). Allow several items open at once.
- `value / defaultValue / onValueChange`: `string[]` (default `[]`). The open items: controlled when value is given, otherwise starting from defaultValue.
- `level`: `2 | 3 | 4 | 5 | 6` (default `3`). Heading level of each item, to fit the page's outline.
- `AccordionItem value`: `string`. Item identity.
- `AccordionItem title`: `string`. Item heading.

## Accessibility

Each title is a heading at the chosen level holding a native button with aria-expanded and aria-controls; the panel is a labelled region.

## Motion

450ms expo height animation; the marker rotates 45°→0° and scales down when open.