An accordion puts long sections of information under a block that people can expand or collapse, keeping lower-priority content out of the way until it’s needed.
Figma
The Figma reference for Accordion will appear here once the design link is added.
Storybook
Interactive examples for Accordion will render here once the Storybook link is wired in.
Best practices
- Use it for information that’s lower priority or that people don’t need to see all the time.
- Don’t use it to hide error messages or other critical information that needs immediate action.
- Place the expandable content immediately after the control that toggles it.
Do’s and don’ts
Do
Collapse supplementary detail that only some people need.
Don’t
Hide critical, time-sensitive content behind a collapsed panel.
Accessibility
- The toggle control conveys expanded/collapsed state via aria-expanded, and points to the panel it controls via aria-controls.
- Keep the panel adjacent to its trigger so people using magnification or screen readers can tell what changed.