When to use Accordions
Use accordions for progressive disclosure, allowing users to reveal only the sections they need. Accordions work best for:
- Secondary or supplementary content (for example, FAQs, settings, product specifications)
- Content where users need specific information rather than browsing everything
- Situations where multiple sections can be open simultaneously for comparison
- Content sections that vary significantly in length
- Small viewport layouts where vertical space is preferred over horizontal space
The accordion component displays large amounts of content in a small space through controlled disclosure. While this adds an extra click for the user to find content, it keeps related content together, and the header will provide key navigation.
Accordion web example
The layout differs slightly between Web and React Native
Accordion React Native example