Accordion

An accordion is an interactive element that organises and displays content in a collapsible and expandable way.

Overview

Accordions are vertical stacks of headers that categorise content. Clicking or interacting with a header expands or collapses its associated content, enabling users to selectively view information while keeping the interface clean.

Accordions are useful for presenting categorised information like FAQs, product features, or menus, and managing large content volumes while ensuring a streamlined user experience.

Three accordions that are vertically stacked together.

Resources

Figma Component	Stable
Figma Documentation	Stable
Web Components	Planned
Vue [Fozzie]	N/A
React [Snacks]	Stable
iOS JustUI [UI Kit]	Pre-release
iOS PIE [SwiftUI]	Pre-release
Android PIE [Compose & Views]	TBC