An accordion allows users to collapse and expand sections of content.
Accordions are composed of a header area and a content area. They deliver large amounts of information in user-controlled sections. They can be used to group or hide information which helps to keep order and scannability on a page.
- Do not use if there is not enough content. Accordions increase cognitive load, do not use if grouping small amounts of content.
- Do not change the width of the accordion when it is expanded or collapsed.
- Do not hide errors or critical information inside an accordion that requires immediate action.
Whether expanded or collapsed, the header height must be 48px. The header area must contain one action indicating that the section expands or collapses and can contain additional actions. The expand/collapse functionality is tied to the entire header. Additional actions are triggered only by interacting directly with that action.
Labels should provide clear and concise direction. Avoid labels that are too long. Labels should be to the point, short and no more than three words. Note that if the label is longer than the maximum width, it will be truncated and should have a tooltip provided.
When the accordion is expanded, the minimum height for the content area is 96px. There is no maximum height for the content area.
Multiple sections can be expanded simultaneously.