- Guidelines
- React API Reference
- Blazor API Reference
Accordions organize content into collapsible sections, allowing users to expand and focus on what matters most while keeping interfaces clean and scannable.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use accordions to group related content and reduce page clutter. |
| Content | Use clear, concise headings for each section. Avoid overloading sections with too much content. |
| Behavior | Only one section should be expanded at a time unless multiple expansion is enabled. Provide smooth transitions for expanding/collapsing. |
| States | Clearly indicate which sections are open or closed. Provide visual feedback for hover, focus, and disabled states. |
| Feedback | Use icons or arrows to show expand/collapse state. Animate transitions for a polished experience. |
| Examples | FAQs, settings panels, filter groups, or any scenario where content can be logically grouped and revealed on demand. |
Best Practices
- Clear Section Titles: Use descriptive, concise titles for each accordion item.
- Consistent Behavior: Accordions should expand/collapse smoothly and predictably.
- Appropriate Grouping: Only group related content. Avoid deeply nested accordions.
- Accessible Controls: Ensure triggers are keyboard accessible and have appropriate ARIA attributes.
- Logical Defaults: Expand the most relevant or first section by default if it helps users.
Do’s and Don’ts
Do
- Use accordions to simplify complex layouts.
- Provide clear visual cues for expanded/collapsed state.
- Support keyboard navigation and screen readers.
- Use for content that benefits from progressive disclosure.
Don't
- Overuse accordions for all content—only use when it improves clarity.
- Hide critical information behind collapsed sections.
- Use ambiguous or generic section titles.
- Rely solely on color to indicate state.
Additional Guidance
- Psychological Impact:
- Progressive Disclosure: Accordions help users focus by revealing information as needed.
- Reduced Cognitive Load: By hiding less relevant content, accordions make interfaces less overwhelming.
- Control: Users feel empowered to explore content at their own pace.