Vertically stacked sections that expand to reveal content, reducing visual noise.
Preview
Code
VUE
<Accordion />Props
Allows multiple sections to be open simultaneously
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
multiple | boolean | false | — | Allows multiple sections to be open simultaneously |
Usage
Use accordions when content sections are too long to display all at once and users likely need only one or two sections. Avoid accordions for short content — plain sections work better. Single-expand mode reduces cognitive load.
Accessibility
Uses aria-expanded on trigger buttons to communicate open/closed state.
Each panel is linked to its trigger via aria-controls and aria-labelledby.
Trigger buttons are keyboard focusable and activated with Enter or Space.