# Accordion

- Page: <https://kznlabs.github.io/labsUI/components/accordion>

## Accordion (`accordion`, component)

Single or multiple panels with spring height animation. Closed content stays in the DOM for SEO.

- Install: `npx @kznlabs/labsui add accordion`
- Docs: <https://kznlabs.github.io/labsUI/components/accordion>
- Brings: use-controllable-state, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Accordion>`: Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
  - `children: ReactNode`: `AccordionItem`s.
  - `collapsible?: boolean`: single only: allow closing the open panel.
  - `defaultValue?: string | string[]`: Open at first render (uncontrolled): an item, or items when `type="multiple"`.
  - `onValueChange?: ((value: string) => void) | ((value: string[]) => void)`: Called with the open item ("" when it closes), or every open item when `type="multiple"`.
  - `type?: "single" | "multiple"`: "single": one panel at a time. "multiple": independent panels.
  - `value?: string | string[]`: Controlled open item ("" = none), or items when `type="multiple"`.
- `<AccordionItem>`
  - `children: ReactNode`: `AccordionTrigger` and `AccordionContent`.
  - `value: string`: Unique id within the Accordion, matched by `value`/`defaultValue`.
- `<AccordionTrigger>`
  - `children: ReactNode`: Question or heading text.
  - `as?: "h2" | "h3" | "h4" | "h5" | "h6"` = `"h3"`: Wrapping heading level; match the page outline (default h3).
- `<AccordionContent>`: Stays mounted when closed (inert, height 0) so content remains crawlable.
  - `children: ReactNode`: Panel content; stays in the HTML while closed.

### Usage

```tsx
<Accordion type="single" defaultValue="a"><AccordionItem value="a"><AccordionTrigger>Q</AccordionTrigger><AccordionContent>A</AccordionContent></AccordionItem></Accordion>
```

### Example: faq.tsx

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
export function Faq() {
  return (
    <Accordion type="single" collapsible defaultValue="a">
      <AccordionItem value="a">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes, keyboard and screen reader friendly.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```