Last Updated on Sep 29, 2022
An accordion allows users to expand and collapse sections of nested content. They hide content to help reduce page scrolling and improve focus. Users can choose to show or hide detailed information as they need.

Design Principles

  • Accordions are often headers to sections of content. They can default to being open or closed. They should be used when space is limited and the section can be hidden without inhibiting the user’s workflow.
  • Accordions can be inside or outside of cards.
  • Nesting accordions is acceptable, but should be
  • Accordion-tiles should only be used in smaller containers or panels. The whole section of an accordion-tile will expand or collapse when clicked. Accordions can be used in panels, but accordion-tiles are preferred.

Do's and Don'ts

Use to shorten pages and reduce scrolling when content can be hidden ad hoc.
To organize sections in a side panel that can be shown or hidden.
Don’t use a button to mimic the same functionality.
Don’t use an accordion to mimic the same functionality of tree menus.
Don’t use to guide users through a multi-step process. Use a Stepper instead.
Related Components