Accordion

An accordion is a graphical interface component comprising a series of panels, each displaying information or options.

Recommended cases

Here are recommended cases for using the accordion. Note that this list is not final, and you may still find a new case when it is needed.

Complex forms

Use an accordion for long or complex input forms to break them into manageable sections, making it less overwhelming for users.

Menu navigation

Use accordions for navigation menus to save screen space and provide a cleaner interface.

Collapsible filters

In interfaces with filters, accordions provide a collapsible way to manage and customize search or display options.

Performance metrics

Performance metrics and analytics are displayed in an accordion format, allowing users to drill down into specific data points without cluttering the main dashboard.

Progressive disclosure

When using progressive disclosure to reveal information gradually, accordions prevent overwhelming users with too much at once.

Limited screen space

In situations where screen space is limited, accordions offer a compact way to present diverse information.

User roles and permissions

In applications with varied user roles, accordions help clarify permissions and responsibilities for each role.