Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.
When to use
- To hide non-critical or optional content, which the user can choose to reveal
- In the main page content, or in overlays, like in a Drawer or Dialog
When not to use
- For critical information, like an error Callout, or mandatory steps critical to completing a user’s task
- Inside another Accordion
Best practices
Do vertically stack related accordions.
Do consider whether an accordion requires further definition or separation from other content–if so, use the bordered variant.
Do place accordions in the main page content.
Be careful with the Accordion title’s length. Shorter titles are recommended to avoid wrapping on smaller breakpoints.
Be careful when using the bordered variant alongside many other borders or outlines, as it can look very busy and distracting.
Don’t nest another accordion within an accordion.
Don’t hide critical information inside an accordion, like an error Callout.