Accordion
Accordions organize content into expandable sections, reducing cognitive load by hiding detail until needed. Use single mode when sections are mutually exclusive (like FAQ), or multiple mode when users may want to compare content across sections.
Variants
SingleOne section at a time
MultipleMultiple open sections
Usage Guidelines
Do
Use accordions for progressive disclosure — FAQ sections, settings groups, or optional detail.
Don't
Don't hide primary content in accordions. If users need it immediately, show it by default.
Do
Use clear, descriptive trigger labels so users know what to expect before expanding.
Don't
Don't use vague labels like 'More' or 'Details'. Be specific about what each section contains.