Accordion

Guidelines

When to use

• Breaking down long forms: To divide lengthy content into manageable sections, improving readability and usability.
• Organizing FAQs: To provide a clean and concise overview of frequently asked questions.
• Hiding complex details: To hide complex or less important details, allowing users to focus on key points first.

 

When Not to Use:

• Comparing information: When all content must be visible simultaneously for comparison or context, and hiding information would restrict understanding.
• Highly interactive environments: In environments where frequent expansion and collapse could frustrate or overwhelm users.
• Essential information at a glance: For content that users need to access quickly without needing to click or interact.

 

Best Practices

• Use Accordions to reduce visual clutter and help users focus on key content.
• Avoid using too many Accordions in one view, as it can create a cluttered experience.
• Ensure each Accordion has a clear purpose and enhances usability.
• Don't use Accordions for purely decorative purposes or when all content needs to be visible at once.

 

Optional elements

The Accordion component has the following optional elements.

• Divider: Separates multiple Accordions vertically, providing a clear visual distinction between sections.
• Description: Displays additional information or context related to the Accordion, complementing the Title.
• Start Slot: A slot for adding additional elements like icons or avatars at the start position of the Accordion. It is preferred to use it with the arrow on the right.
• End Slot: A slot for adding additional elements like icons, avatars, or actions at the end position of the Accordion. Prioritize using it with the arrow on the left.

 

Arrow position

• Left: The default and preferred position. It aligns with the left-to-right reading direction, making the Accordion more discoverable, especially on wider designs. When adding additional elements or slots, prioritize using the End Slot for optimal visual balance.
• Right: The alternative position. It’s commonly used in filter groupings or forms with short widths (such as in small side panels), aligning content with the title. If additional elements are needed, prioritize the Start Slot to maintain a clean and balanced layout.

 

---

Behavior

Mouse interactions

The entire header area is interactive, so clicking anywhere within it will expand or collapse the Accordion content.

---

Layout

Desktop vs. Mobile

Accordions should provide a seamless experience across both desktop and mobile platforms.

• Desktop: Ensure accordions expand and collapse smoothly, but don't make headers so small that they are hard to click.
• Mobile: Optimize touch targets for mobile interactions, but don't design accordion content that requires excessive scrolling.