Accordion
- Usage
- Styling
Accordion is a vertically stacked set of expandable panels. It reduces clutter and helps maintain the user’s focus by showing only the relevant content at any time.
new tab
<vaadin-accordion>
<vaadin-accordion-panel summary="Personal information">
<vaadin-vertical-layout>
<span>Sophia Williams</span>
<span>sophia.williams@company.com</span>
<span>(501) 555-9128</span>
</vaadin-vertical-layout>
</vaadin-accordion-panel>
</vaadin-accordion>Anatomy
Accordion consists of stacked panels, each composed of two parts: a summary and a content area. Only one panel can be expanded at a time. Use the Details component to allow multiple, simultaneously expanded sections.
Summary
The summary is the part that’s always visible, and typically describes the content, for example, with a title. Clicking on the summary toggles the content area’s visibility.
The summary supports rich content and can contain any component. This can be utilized, for example, to display the status of the corresponding content.
new tab
<vaadin-accordion
.opened="${this.openedPanelIndex}"
@opened-changed="${(event: AccordionOpenedChangedEvent) => {
this.openedPanelIndex = event.detail.value;
}}"
>
<vaadin-accordion-panel>
<vaadin-accordion-heading slot="summary">
<vaadin-horizontal-layout style="width: 100%; align-items: center">
Customer details
<vaadin-vertical-layout
.hidden="${this.openedPanelIndex === 0}"
style="font-size: var(--lumo-font-size-s); margin-left: auto"
>
<span>
${this.personBinder.value.firstName} ${this.personBinder.value.lastName}
</span>
<span>${this.personBinder.value.email}</span>
<span>${this.personBinder.value.address?.phone}</span>
</vaadin-vertical-layout>
</vaadin-horizontal-layout>
</vaadin-accordion-heading>
</vaadin-accordion-panel>
</vaadin-accordion>Content
This is the collapsible part of a panel. It can contain any component. When the content area is collapsed, the content is invisible and inaccessible by keyboard or screen reader.
new tab
<vaadin-accordion>
<vaadin-accordion-panel summary="Analytics">
<vaadin-vertical-layout>
<a href="#">Dashboard</a>
<a href="#">Reports</a>
<a href="#">Data sources</a>
</vaadin-vertical-layout>
</vaadin-accordion-panel>
</vaadin-accordion>Theme Variants
Accordion has three theme variants: filled, small, and reverse. Set the theme attribute separately for each panel, not on Accordion itself. Theme names can be combined with each other. For example, all three themes variants can be applied to a panel.
Filled Panels
The filled theme variant makes the panel’s boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI.
new tab
<vaadin-accordion>
<vaadin-accordion-panel summary="Personal information" theme="filled">
<vaadin-vertical-layout>
<span>Sophia Williams</span>
<span>sophia.williams@company.com</span>
<span>(501) 555-9128</span>
</vaadin-vertical-layout>
</vaadin-accordion-panel>
</vaadin-accordion>Small Panels
Use the small theme variant for compact UIs.
new tab
<vaadin-accordion>
<vaadin-accordion-panel summary="Personal information" theme="small">
<vaadin-vertical-layout>
<span>Sophia Williams</span>
<span>sophia.williams@company.com</span>
<span>(501) 555-9128</span>
</vaadin-vertical-layout>
</vaadin-accordion-panel>
</vaadin-accordion>Reverse Panels
The reverse theme variant places the toggle icon after the summary contents. This can be useful for aligning visually the summary with other content.
new tab
<vaadin-accordion>
<vaadin-accordion-panel summary="Personal information" theme="reverse">
<vaadin-vertical-layout>
<span>Sophia Williams</span>
<span>sophia.williams@company.com</span>
<span>(501) 555-9128</span>
</vaadin-vertical-layout>
</vaadin-accordion-panel>
</vaadin-accordion>Disabled Panels
Accordion panels can be disabled to prevent them from being expanded or collapsed. Details can also be disabled to prevent them from being expanded or collapsed. Components inside a disabled expanded panel are automatically disabled as well.
new tab
<vaadin-accordion>
<vaadin-accordion-panel summary="Personal information">
<vaadin-vertical-layout>
<span>Sophia Williams</span>
<span>sophia.williams@company.com</span>
<span>(501) 555-9128</span>
</vaadin-vertical-layout>
</vaadin-accordion-panel>
<vaadin-accordion-panel summary="Billing address" disabled>
<vaadin-vertical-layout>
<span>4027 Amber Lake Canyon</span>
<span>72333-5884 Cozy Nook</span>
<span>Arkansas</span>
</vaadin-vertical-layout>
</vaadin-accordion-panel>
<vaadin-accordion-panel summary="Payment" disabled>
<vaadin-vertical-layout>
<span>MasterCard</span>
<span>1234 5678 9012 3456</span>
<span>Expires 06/21</span>
</vaadin-vertical-layout>
</vaadin-accordion-panel>
</vaadin-accordion>Best Practices
Accordions are suitable when users need to focus on smaller pieces of content at any given time. However, when all of the content is relevant to the user to make a decision, Accordions should be avoided. Content areas that are logically linked should be grouped together in one panel.
Accordions are better suited than Tabs for long labels. However, Accordions can feel jumpy as panels are toggled — especially if there are several panels or the panel content is long.
Details can be used instead of Accordion when there is a need to see content from multiple panels, simultaneously.
Accordions can be used to break a complex form into smaller step-by-step sections.
The expandable and collapsible nature of accordions can sometimes be difficult for users to discover. Use the filled variant and apply tooltips on the panels to make this more discoverable.