Accordion

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 a time.

Open in a
new tab
<vaadin-accordion>
  <vaadin-accordion-panel>
    <div slot="summary">Personal information</div>

    <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. (The Details component can be used to allow multiple simultaneously expanded sections.)

Summary

The summary is the part that is always visible, and typically describes the contents, 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.

Open in a
new tab
<vaadin-accordion
  .opened="${this.openedPanelIndex}"
  @opened-changed="${(e: CustomEvent) => (this.openedPanelIndex = e.detail.value)}"
>
  <vaadin-accordion-panel>
    <div slot="summary">
      Customer details
      <vaadin-vertical-layout
        .hidden="${this.openedPanelIndex === 0}"
        style="font-size: var(--lumo-font-size-s)"
      >
        <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>
    </div>
  </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.

Open in a
new tab
<vaadin-accordion>
  <vaadin-accordion-panel>
    <div slot="summary">Analytics</div>

    <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 filled, small, and reverse can be applied to a panel.

Filled Panels

The filled theme variant makes the panel’s boundaries visible, which helps tie its content together visually and distinguishes it from the surrounding UI.

Open in a
new tab
<vaadin-accordion>
  <vaadin-accordion-panel theme="filled">
    <div slot="summary">Personal information</div>

    <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.

Open in a
new tab
<vaadin-accordion>
  <vaadin-accordion-panel theme="small">
    <div slot="summary">Personal information</div>

    <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, which can be useful for visually aligning the summary with other content.

Open in a
new tab
<vaadin-accordion>
  <vaadin-accordion-panel theme="reverse">
    <div slot="summary">Personal information</div>

    <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 be disabled to prevent them from being expanded or collapsed. Components inside a disabled expanded panel are automatically disabled as well.

Open in a
new tab
<vaadin-accordion>
  <vaadin-accordion-panel disabled>
    <div slot="summary">Payment</div>

    <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 a time. However, when the whole content is relevant to the user to make a decision, Accordions should be avoided.

  • Contents that are logically linked should be grouped together in one panel.

  • Accordions are better suited for long labels compared to Tabs. However, Accordions can feel “jumpy” as panels are toggled (if there are a lot of 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.

ComponentUsage recommendations

Details

Single collapsible panel.

Tabs

Component for organizing and grouping content into navigable sections.