Accordion Component
Collapsible content panels for organizing information in expandable sections with various styles and interactions.
Live Examples
Basic Accordion
Flush Accordion
Accordion with Icons
Usage Guidelines
When to Use
- To organize large amounts of content in a compact format
- When users need to scan through different topics quickly
- For FAQ sections, settings panels, or help documentation
- To reduce cognitive load by showing only relevant information
- When vertical space is limited but content is extensive
Best Practices
- Use clear, descriptive headers that indicate the content within
- Keep content within panels concise and scannable
- Consider allowing multiple panels to be open simultaneously for related content
- Use consistent visual styling across all accordion items
- Provide clear visual indicators for expanded/collapsed states
- Include smooth transitions for better user experience
- Group related content logically within the accordion structure
Accessibility Features
- ARIA attributes for screen readers (aria-expanded, aria-controls)
- Keyboard navigation with Enter and Space keys to toggle panels
- Focus management and visible focus indicators
- Proper heading structure and semantic markup
- Clear visual indicators for expanded/collapsed states
- Logical tab order through accordion items