{
  "title": "Accordion",
  "description": "Vertically stacked, individually expandable sections with full keyboard nav and shared-value content/trigger pairing.",
  "url": "/docs/components/accordion",
  "since": "0.3.0",
  "tags": [
    "display",
    "disclosure"
  ],
  "platform": "both",
  "source": "---\ntitle: Accordion\ndescription: Vertically stacked, individually expandable sections with full keyboard nav and shared-value content/trigger pairing.\nsince: 0.3.0\ntags: [display, disclosure]\nplatform: both\ncategory: display\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Accordion\" />\n\n## At a glance\n\n- Compose `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`. Each item's `value` pairs the trigger with its content.\n- Two modes:\n  - `type=\"single\"` — at most one item open. Pass `collapsible` to allow closing the open item.\n  - `type=\"multiple\"` — any combination open. `value` and `defaultValue` are arrays.\n- Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).\n- **Keyboard nav** on triggers:\n  - Arrow Down / Arrow Up → move focus between triggers (wraps)\n  - Home / End → first / last\n  - Enter / Space → toggle the focused item\n- **ARIA**: triggers render as real `<button>`s with `aria-expanded` and `aria-controls`. Content panels expose `role=\"region\"` and `aria-labelledby` pointing at the trigger.\n- Cross-platform: works on React Native and react-native-web. The chevron rotates 180° on open via a CSS transition on web; on native it snaps.\n\n## Single (collapsible)\n\n<Preview name=\"accordion-single\" />\n\n## Multiple\n\n<Preview name=\"accordion-multiple\" />\n\n## API\n\n### Accordion\n\n`type` is required and discriminates the value shape:\n\n- `type=\"single\"` → `value?: string | null`, `defaultValue?: string`, `onChange?: (next: string | null) => void`, `collapsible?: boolean`.\n- `type=\"multiple\"` → `value?: string[]`, `defaultValue?: string[]`, `onChange?: (next: string[]) => void`.\n\n<PropsTable component=\"Accordion\" />\n\n### AccordionItem\n\n<PropsTable component=\"AccordionItem\" />\n\n### AccordionTrigger\n\n<PropsTable component=\"AccordionTrigger\" />\n\n### AccordionContent\n\n<PropsTable component=\"AccordionContent\" />\n"
}