An accordion is an interactive UI element that allows users to expand and collapse individual blocks of information on demand, organizing them into compact sections.

By default, the trigger is positioned on the left side. If needed, it can be placed in the left part of the section header after the title or on the right side of the section header.

By default, the accordion allows only one section to be expanded at a time. However, it is possible to enable the expansion of all sections simultaneously.

If necessary, a section can be disabled, preventing it from being expanded.

The content inside a section can be placed within the section header or inside the content area.

The section header can additionally include an icon, description, left and right badges, as well as extra actions (using an Icon Button).

This area can contain any type of content.

• Each accordion section should have a clear and informative title that accurately reflects its content. This helps users quickly find the necessary information.
• Accordion sections should be organized in a logical sequence, such as alphabetical order, hierarchical structure, or thematic grouping.