Accordion
Vertically stacked sections that expand to reveal their content.
- Data
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add accordionnpm packages installed: radix-ui.
import { Accordion } from "@/components/ui/accordion";Default
Multiple
With Disabled Item
<AccordionItem>
Every prop of Radix UI’s Accordion.Item, plus className.
<AccordionTrigger>
Every prop of Radix UI’s Accordion.Trigger, plus className.
<AccordionContent>
Every prop of Radix UI’s Accordion.Content, plus className.
Each trigger is a button inside a heading, so screen reader users can navigate the sections by heading. aria-expanded and aria-controls tie the trigger to its panel, and arrow keys move between triggers.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes