Disclosure
Accordion
A collapsible menu whose headers open and close the section below. It works from the keyboard, and screen readers announce whether each section is open.
ReactVueWeb Components
View in Storybook Playground
Examples
<Accordion items={[{ id: 'a', header: 'A', content: '…' }]} />Props
| Name | Type | Default | Description |
|---|---|---|---|
items required | AccordionItem[] | — | The items to render. |
multiple | boolean | false | Allow multiple panels open at once. @default false |
open | string[] | — | Controlled set of open item ids. |
defaultOpen | string[] | — | Initial open item ids (uncontrolled). @default [] |
onOpenChange | (open: string[]) => void | — | Called when the open set changes. |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.