Accordion

The accordion component displays content in collapsible sections. It’s useful for progressively disclosing information, improving page scannability, and organizing content into manageable segments.

Healthy

Show details

Overview

Key features

Use as a single accordion or a group of accordions stacked vertically.

The component is composed of a set of partials: <Accordion| item>.

Anatomy

Accordion Item: The accordion component is composed of a set of partials: <Accordion| item>.

Header: This is a slot component _accordion|header. It can be replaced with a custom component.

Panel: This is a slot component _accordion|panel. It can be replaced with a custom component.

Look and feel

States

When the property “is open” is set to true, the panel is displayed.

Themes

Spark and ocean themes

Best Practice

Use semantic headings (<h2>, <h3>, etc.) to support accessibility and SEO.

Apply singleExpand in groups when only one section should be open at a time.

Use visual variants to reflect the context (e.g., warning for alerts).

Don't

Nest multiple heading tags in the title area.

Overload the panel content with unrelated or excessive information.

Links

The Figma file contains the latest UI designs, while the links to Web Component, Blazor, Angular, React, and VueJS provide a live demo of components in various states, themes, and interactions.

Figma component

Open in Figma

Webcomponent

Open link

Blazor

Open link

Angular

Open link

React

Open link

VueJS

Open link

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.