Accordion

Accordion is a vertically stacked set of expandable panels.

Usage
Styling

Anatomy
Theme Variants
Disabled Panels
Best Practices
Related Components

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.

Open in a
new tab

Source code

AccordionBasic.javapackage com.vaadin.demo.component.accordion;

import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("accordion-basic")
public class AccordionBasic extends Div {

    public AccordionBasic() {
        // tag::snippet[]
        Accordion accordion = new Accordion();

        Span name = new Span("Sophia Williams");
        Span email = new Span("sophia.williams@company.com");
        Span phone = new Span("(501) 555-9128");

        VerticalLayout personalInformationLayout = new VerticalLayout(name,
                email, phone);
        personalInformationLayout.setSpacing(false);
        personalInformationLayout.setPadding(false);

        accordion.add("Personal information", personalInformationLayout);
        // end::snippet[]

        Span street = new Span("4027 Amber Lake Canyon");
        Span zipCode = new Span("72333-5884 Cozy Nook");
        Span city = new Span("Arkansas");

        VerticalLayout billingAddressLayout = new VerticalLayout();
        billingAddressLayout.setSpacing(false);
        billingAddressLayout.setPadding(false);
        billingAddressLayout.add(street, zipCode, city);
        accordion.add("Billing address", billingAddressLayout);

        Span cardBrand = new Span("Mastercard");
        Span cardNumber = new Span("1234 5678 9012 3456");
        Span expiryDate = new Span("Expires 06/21");

        VerticalLayout paymentLayout = new VerticalLayout();
        paymentLayout.setSpacing(false);
        paymentLayout.setPadding(false);
        paymentLayout.add(cardBrand, cardNumber, expiryDate);
        accordion.add("Payment", paymentLayout);

        add(accordion);
    }

}
accordion-basic.tsximport React from 'react';
import { Accordion, AccordionPanel, VerticalLayout } from '@vaadin/react-components';

function Example() {
  return (
    // tag::snippet[]
    <Accordion>
      <AccordionPanel summary="Personal information">
        <VerticalLayout>
          <span>Sophia Williams</span>
          <span>sophia.williams@company.com</span>
          <span>(501) 555-9128</span>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Billing address">
        <VerticalLayout>
          <span>4027 Amber Lake Canyon</span>
          <span>72333-5884 Cozy Nook</span>
          <span>Arkansas</span>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Payment">
        <VerticalLayout>
          <span>MasterCard</span>
          <span>1234 5678 9012 3456</span>
          <span>Expires 06/21</span>
        </VerticalLayout>
      </AccordionPanel>
    </Accordion>
    // end::snippet[]
  );
}

accordion-basic.tsimport '@vaadin/accordion';
import '@vaadin/text-field';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('accordion-basic')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
        <!-- end::snippet[] -->

        <vaadin-accordion-panel summary="Billing address">
          <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">
          <vaadin-vertical-layout>
            <span>MasterCard</span>
            <span>1234 5678 9012 3456</span>
            <span>Expires 06/21</span>
          </vaadin-vertical-layout>
        </vaadin-accordion-panel>
        <!-- tag::snippet[] -->
      </vaadin-accordion>
      <!-- end::snippet[] -->
    `;
  }
}

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.

Open in a
new tab

Source code

AccordionSummary.javapackage com.vaadin.demo.component.accordion;

import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.accordion.AccordionPanel;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.EmailField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.Address;
import com.vaadin.demo.domain.Card;
import com.vaadin.demo.domain.Country;
import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;

@Route("accordion-summary")
public class AccordionSummary extends Div {

    private static final String PAYMENT = "Payment";
    private static final String BILLING_ADDRESS = "Billing address";
    private static final String CUSTOMER_DETAILS = "Customer details";

    public AccordionSummary() {
        Accordion accordion = new Accordion();

        Binder<Person> personBinder = new Binder<>(Person.class);
        personBinder.setBean(new Person());

        Binder<Card> cardBinder = new Binder<>(Card.class);
        cardBinder.setBean(new Card());

        FormLayout customerDetailsFormLayout = createFormLayout();
        // tag::snippet[]
        AccordionPanel customDetailsPanel = accordion.add(CUSTOMER_DETAILS,
                customerDetailsFormLayout);
        // end::snippet[]

        FormLayout billingAddressFormLayout = createFormLayout();
        AccordionPanel billingAddressPanel = accordion.add(BILLING_ADDRESS,
                billingAddressFormLayout);

        FormLayout paymentFormLayout = createFormLayout();
        AccordionPanel paymentPanel = accordion.add(PAYMENT, paymentFormLayout);

        // Customer details fields

        TextField firstName = new TextField("First name");
        personBinder.forField(firstName).bind("firstName");

        TextField lastName = new TextField("Last name");
        personBinder.forField(lastName).bind("lastName");

        EmailField email = new EmailField("Email address");
        personBinder.forField(email).bind("email");

        TextField phone = new TextField("Phone number");
        personBinder.forField(phone).bind(person -> {
            if (person.getAddress() != null) {
                return person.getAddress().getPhone();
            }
            return "";
        }, (person, value) -> {
            if (person.getAddress() == null) {
                person.setAddress(new Address());
            }
            person.getAddress().setPhone(value);
        });

        customerDetailsFormLayout.add(firstName, lastName);
        customerDetailsFormLayout.add(email, 2);
        customerDetailsFormLayout.add(phone, 2);

        // tag::snippet[]
        customDetailsPanel.addOpenedChangeListener(e -> {
            if (e.isOpened()) {
                customDetailsPanel.setSummaryText(CUSTOMER_DETAILS);
            } else if (personBinder.getBean() != null) {
                Person personValues = personBinder.getBean();
                customDetailsPanel.setSummary(createSummary(CUSTOMER_DETAILS,
                        personValues.getFirstName() + " "
                                + personValues.getLastName(),
                        personValues.getEmail(),
                        personValues.getAddress() != null
                                ? personValues.getAddress().getPhone()
                                : ""));
            }
        });
        // end::snippet[]

        Button customDetailsButton = new Button("Continue",
                (e) -> billingAddressPanel.setOpened(true));
        customDetailsButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        customDetailsPanel.addContent(customDetailsButton);

        // Billing address fields

        TextField address = new TextField("Address");
        personBinder.forField(address).bind(person -> {
            if (person.getAddress() != null) {
                return person.getAddress().getStreet();
            }
            return "";
        }, (person, value) -> {
            if (person.getAddress() == null) {
                person.setAddress(new Address());
            }
            person.getAddress().setStreet(value);
        });

        TextField zipCode = new TextField("ZIP code");
        personBinder.forField(zipCode).bind(person -> {
            if (person.getAddress() != null) {
                return person.getAddress().getZip();
            }
            return "";
        }, (person, value) -> {
            if (person.getAddress() == null) {
                person.setAddress(new Address());
            }
            person.getAddress().setZip(value);
        });

        TextField city = new TextField("City");
        personBinder.forField(city).bind(person -> {
            if (person.getAddress() != null) {
                return person.getAddress().getCity();
            }
            return "";
        }, (person, value) -> {
            if (person.getAddress() == null) {
                person.setAddress(new Address());
            }
            person.getAddress().setCity(value);
        });

        ComboBox<Country> countries = new ComboBox<>("Country");
        countries.setItems(DataService.getCountries());
        countries.setItemLabelGenerator(Country::getName);
        personBinder.forField(countries).bind(person -> {
            if (person.getAddress() != null) {
                Country country = new Country();
                country.setName(person.getAddress().getCountry());
                return country;
            }
            return null;
        }, (person, value) -> {
            if (person.getAddress() == null) {
                person.setAddress(new Address());
            }
            person.getAddress().setCountry(value.getName());
        });

        billingAddressFormLayout.add(address, 2);
        billingAddressFormLayout.add(zipCode, city, countries);

        billingAddressPanel.addOpenedChangeListener(e -> {
            if (e.isOpened()) {
                billingAddressPanel.setSummaryText(BILLING_ADDRESS);
            } else if (personBinder.getBean().getAddress() != null) {
                Address addressValues = personBinder.getBean().getAddress();
                billingAddressPanel.setSummary(createSummary(BILLING_ADDRESS,
                        addressValues.getStreet(),
                        addressValues.getZip() + " " + addressValues.getCity(),
                        addressValues.getCountry()));
            }
        });

        Button billingAddressButton = new Button("Continue",
                (e) -> paymentPanel.setOpened(true));
        billingAddressButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        billingAddressPanel.addContent(billingAddressButton);

        // Payment fields
        TextField accountNumber = new TextField("Card number");
        cardBinder.forField(accountNumber).bind("accountNumber");

        TextField expiryDate = new TextField("Expiry date");
        cardBinder.forField(expiryDate).bind("expiryDate");

        TextField cvv = new TextField("CVV");
        cardBinder.forField(cvv).bind("cvv");

        paymentFormLayout.add(accountNumber, 2);
        paymentFormLayout.add(expiryDate, cvv);

        paymentPanel.addOpenedChangeListener(e -> {
            if (e.isOpened()) {
                paymentPanel.setSummaryText(PAYMENT);
            } else if (cardBinder.getBean() != null) {
                Card cardValues = cardBinder.getBean();
                paymentPanel.setSummary(
                        createSummary(PAYMENT, cardValues.getAccountNumber(),
                                cardValues.getExpiryDate()));
            }
        });

        Button paymentButton = new Button("Finish",
                (e) -> paymentPanel.setOpened(false));
        paymentButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        paymentPanel.addContent(paymentButton);

        add(accordion);
    }

    private FormLayout createFormLayout() {
        FormLayout billingAddressFormLayout = new FormLayout();
        billingAddressFormLayout.setResponsiveSteps(
                new FormLayout.ResponsiveStep("0", 1),
                new FormLayout.ResponsiveStep("20em", 2));
        return billingAddressFormLayout;
    }

    private VerticalLayout createSummary(String title, String... details) {
        VerticalLayout layout = new VerticalLayout();
        layout.setSpacing(false);
        layout.setPadding(false);

        layout.add(title);

        if (details.length > 0) {
            VerticalLayout detailsLayout = new VerticalLayout();
            detailsLayout.setSpacing(false);
            detailsLayout.setPadding(false);
            detailsLayout.getStyle().set("font-size",
                    "var(--lumo-font-size-s)");

            for (String detail : details) {
                if (detail != null && !detail.isEmpty()) {
                    detailsLayout.add(new Span(detail));
                }
            }

            layout.add(detailsLayout);
        }

        return layout;
    }

}
accordion-summary.tsximport React, { useEffect } from 'react';
import { useForm } from '@vaadin/hilla-react-form';
import { useSignal } from '@vaadin/hilla-react-signals';
import {
  Accordion,
  AccordionHeading,
  type AccordionOpenedChangedEvent,
  AccordionPanel,
  Button,
  ComboBox,
  EmailField,
  FormLayout,
  type FormLayoutResponsiveStep,
  HorizontalLayout,
  TextField,
  VerticalLayout,
} from '@vaadin/react-components';
import { getCountries } from 'Frontend/demo/domain/DataService';
import CardModel from 'Frontend/generated/com/vaadin/demo/domain/CardModel';
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
import PersonModel from 'Frontend/generated/com/vaadin/demo/domain/PersonModel';

const responsiveSteps: FormLayoutResponsiveStep[] = [
  { minWidth: 0, columns: 1 },
  { minWidth: '20em', columns: 2 },
];

function Example() {
  const countries = useSignal<Country[]>([]);
  const openedPanelIndex = useSignal<number | null>(0);

  const person = useForm(PersonModel);
  const card = useForm(CardModel);

  const handleAccordionPanelOpen = (event: AccordionOpenedChangedEvent) => {
    openedPanelIndex.value = event.detail.value;
  };

  useEffect(() => {
    getCountries().then((items) => {
      countries.value = items;
    });
  }, []);

  // tag::snippet[]
  return (
    <Accordion opened={openedPanelIndex.value} onOpenedChanged={handleAccordionPanelOpen}>
      <AccordionPanel>
        <AccordionHeading slot="summary">
          <HorizontalLayout style={{ width: '100%', alignItems: 'center' }}>
            Customer details
            <VerticalLayout
              hidden={openedPanelIndex.value === 0}
              style={{ fontSize: 'var(--lumo-font-size-s)', marginLeft: 'auto' }}
            >
              <span>
                {person.value.firstName} {person.value.lastName}
              </span>
              <span>{person.value.email}</span>
              <span>{person.value.address?.phone}</span>
            </VerticalLayout>
          </HorizontalLayout>
        </AccordionHeading>
        <FormLayout responsiveSteps={responsiveSteps}>
          <TextField label="First name" {...person.field(person.model.firstName)} />

          <TextField label="Last name" {...person.field(person.model.lastName)} />

          <EmailField
            label="Email address"
            data-colspan="2"
            {...person.field(person.model.email)}
          />

          <TextField
            label="Phone number"
            data-colspan="2"
            {...person.field(person.model.address.phone)}
          />
        </FormLayout>

        <Button
          theme="primary"
          onClick={() => {
            openedPanelIndex.value = 1;
          }}
        >
          Continue
        </Button>
      </AccordionPanel>

      <AccordionPanel>
        <AccordionHeading slot="summary">
          <HorizontalLayout style={{ width: '100%', alignItems: 'center' }}>
            Billing address
            <VerticalLayout
              hidden={openedPanelIndex.value === 1}
              style={{ fontSize: 'var(--lumo-font-size-s)', marginLeft: 'auto' }}
            >
              <span>{person.value.address?.street}</span>
              <span>
                {person.value.address?.zip} {person.value.address?.city}
              </span>
              <span>{person.value.address?.country}</span>
            </VerticalLayout>
          </HorizontalLayout>
        </AccordionHeading>

        <FormLayout responsiveSteps={responsiveSteps}>
          <TextField
            label="Address"
            data-colspan="2"
            {...person.field(person.model.address.street)}
          />

          <TextField label="ZIP code" {...person.field(person.model.address.zip)} />

          <TextField label="City" {...person.field(person.model.address.city)} />

          <ComboBox
            label="Country"
            itemLabelPath="name"
            itemValuePath="name"
            items={countries.value}
            {...person.field(person.model.address.country)}
          />
        </FormLayout>

        <Button
          theme="primary"
          onClick={() => {
            openedPanelIndex.value = 2;
          }}
        >
          Continue
        </Button>
      </AccordionPanel>

      <AccordionPanel>
        <AccordionHeading slot="summary">
          <HorizontalLayout style={{ width: '100%', alignItems: 'center' }}>
            Payment
            <VerticalLayout
              hidden={openedPanelIndex.value === 2}
              style={{ fontSize: 'var(--lumo-font-size-s)', marginLeft: 'auto' }}
            >
              <span>{card.value.accountNumber}</span>
              <span>{card.value.expiryDate}</span>
            </VerticalLayout>
          </HorizontalLayout>
        </AccordionHeading>

        <FormLayout responsiveSteps={responsiveSteps}>
          <TextField
            label="Card number"
            data-colspan="2"
            {...card.field(card.model.accountNumber)}
          />

          <TextField label="Expiry date" {...card.field(card.model.expiryDate)} />

          <TextField label="CVV" {...card.field(card.model.cvv)} />
        </FormLayout>

        <Button
          theme="primary"
          onClick={() => {
            openedPanelIndex.value = -1;
          }}
        >
          Finish
        </Button>
      </AccordionPanel>
    </Accordion>
  );
  // end::snippet[]
}

accordion-summary.tsimport '@vaadin/accordion';
import '@vaadin/button';
import '@vaadin/combo-box';
import '@vaadin/email-field';
import '@vaadin/form-layout';
import '@vaadin/horizontal-layout';
import '@vaadin/text-field';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { AccordionOpenedChangedEvent } from '@vaadin/accordion';
import type { FormLayoutResponsiveStep } from '@vaadin/form-layout';
import { Binder, field } from '@vaadin/hilla-lit-form';
import { getCountries } from 'Frontend/demo/domain/DataService';
import CardModel from 'Frontend/generated/com/vaadin/demo/domain/CardModel';
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
import PersonModel from 'Frontend/generated/com/vaadin/demo/domain/PersonModel';
import { applyTheme } from 'Frontend/generated/theme';

const responsiveSteps: FormLayoutResponsiveStep[] = [
  { minWidth: 0, columns: 1 },
  { minWidth: '20em', columns: 2 },
];

@customElement('accordion-summary')
export class Example extends LitElement {
  @state()
  private countries: Country[] = [];

  private readonly personBinder = new Binder(this, PersonModel);

  private readonly cardBinder = new Binder(this, CardModel);

  @state()
  private openedPanelIndex: number | null = 0;

  protected override async firstUpdated() {
    this.countries = await getCountries();
  }

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
          <!-- end::snippet[] -->

          <vaadin-form-layout .responsiveSteps="${responsiveSteps}">
            <vaadin-text-field
              label="First name"
              ${field(this.personBinder.model.firstName)}
            ></vaadin-text-field>
            <vaadin-text-field
              label="Last name"
              ${field(this.personBinder.model.lastName)}
            ></vaadin-text-field>
            <vaadin-email-field
              label="Email address"
              ${field(this.personBinder.model.email)}
              colspan="2"
            ></vaadin-email-field>
            <vaadin-text-field
              label="Phone number"
              ${field(this.personBinder.model.address.phone)}
              colspan="2"
            ></vaadin-text-field>
          </vaadin-form-layout>
          <vaadin-button
            theme="primary"
            @click="${() => {
              this.openedPanelIndex = 1;
            }}"
          >
            Continue
          </vaadin-button>
        </vaadin-accordion-panel>

        <vaadin-accordion-panel>
          <vaadin-accordion-heading slot="summary">
            <vaadin-horizontal-layout style="width: 100%; align-items: center">
              Billing address
              <vaadin-vertical-layout
                .hidden="${this.openedPanelIndex === 1}"
                style="font-size: var(--lumo-font-size-s); margin-left: auto"
              >
                <span>${this.personBinder.value.address?.street}</span>
                <span>
                  ${this.personBinder.value.address?.zip} ${this.personBinder.value.address?.city}
                </span>

                <span> ${this.personBinder.value.address?.country} </span>
              </vaadin-vertical-layout>
            </vaadin-horizontal-layout>
          </vaadin-accordion-heading>

          <vaadin-form-layout .responsiveSteps="${responsiveSteps}">
            <vaadin-text-field
              label="Address"
              ${field(this.personBinder.model.address.street)}
              colspan="2"
            ></vaadin-text-field>
            <vaadin-text-field
              label="ZIP code"
              ${field(this.personBinder.model.address.zip)}
            ></vaadin-text-field>
            <vaadin-text-field
              label="City"
              ${field(this.personBinder.model.address.city)}
            ></vaadin-text-field>
            <vaadin-combo-box
              label="Country"
              ${field(this.personBinder.model.address.country)}
              item-label-path="name"
              item-value-path="name"
              .items="${this.countries}"
            ></vaadin-combo-box>
          </vaadin-form-layout>
          <vaadin-button
            theme="primary"
            @click="${() => {
              this.openedPanelIndex = 2;
            }}"
          >
            Continue
          </vaadin-button>
        </vaadin-accordion-panel>

        <vaadin-accordion-panel>
          <vaadin-accordion-heading slot="summary">
            <vaadin-horizontal-layout style="width: 100%; align-items: center">
              Payment
              <vaadin-vertical-layout
                .hidden="${this.openedPanelIndex === 2}"
                style="font-size: var(--lumo-font-size-s); margin-left: auto"
              >
                <span>${this.cardBinder.value.accountNumber}</span>
                <span>${this.cardBinder.value.expiryDate}</span>
              </vaadin-vertical-layout>
            </vaadin-horizontal-layout>
          </vaadin-accordion-heading>

          <vaadin-form-layout .responsiveSteps="${responsiveSteps}">
            <vaadin-text-field
              label="Card number"
              ${field(this.cardBinder.model.accountNumber)}
              colspan="2"
            ></vaadin-text-field>
            <vaadin-text-field
              label="Expiry date"
              ${field(this.cardBinder.model.expiryDate)}
            ></vaadin-text-field>
            <vaadin-text-field label="CVV" ${field(this.cardBinder.model.cvv)}></vaadin-text-field>
          </vaadin-form-layout>
          <vaadin-button
            theme="primary"
            @click="${() => {
              this.openedPanelIndex = -1;
            }}"
          >
            Finish
          </vaadin-button>
          <!-- tag::snippet[] -->
        </vaadin-accordion-panel>
      </vaadin-accordion>
      <!-- end::snippet[] -->
    `;
  }
}

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

Source code

AccordionContent.javapackage com.vaadin.demo.component.accordion;

import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.accordion.AccordionPanel;
import com.vaadin.flow.component.html.Anchor;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("accordion-content")
public class AccordionContent extends Div {

    public AccordionContent() {
        // tag::snippet[]
        Accordion accordion = new Accordion();

        accordion.add("Analytics",
                createContent(createStyledAnchor("#", "Dashboard"),
                        createStyledAnchor("#", "Reports"),
                        createStyledAnchor("#", "Data sources")));
        // end::snippet[]

        accordion.add("Customers",
                createContent(createStyledAnchor("#", "Accounts"),
                        createStyledAnchor("#", "Contacts")));

        AccordionPanel financesPanel = new AccordionPanel();
        financesPanel.setSummaryText("Finances");
        financesPanel
                .addContent(createContent(createStyledAnchor("#", "Invoices"),
                        createStyledAnchor("#", "Transactions"),
                        createStyledAnchor("#", "Statements")));
        accordion.add(financesPanel);

        add(accordion);
    }

    private VerticalLayout createContent(Anchor... anchors) {
        VerticalLayout content = new VerticalLayout();
        content.setPadding(false);
        content.setSpacing(false);
        content.add(anchors);

        return content;
    }

    private Anchor createStyledAnchor(String href, String text) {
        Anchor anchor = new Anchor(href, text);
        anchor.getStyle().set("color", "var(--lumo-primary-text-color)");
        anchor.getStyle().set("text-decoration", "none");

        return anchor;
    }

}
accordion-content.tsximport React from 'react';
import { Accordion, AccordionPanel, VerticalLayout } from '@vaadin/react-components';

function Example() {
  return (
    // tag::snippet[]
    <Accordion>
      <AccordionPanel summary="Analytics">
        <VerticalLayout>
          <a href="#">Dashboard</a>
          <a href="#">Reports</a>
          <a href="#">Data sources</a>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Customers">
        <VerticalLayout>
          <a href="#">Accounts</a>
          <a href="#">Contacts</a>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Finances">
        <VerticalLayout>
          <a href="#">Invoices</a>
          <a href="#">Transactions</a>
          <a href="#">Statements</a>
        </VerticalLayout>
      </AccordionPanel>
    </Accordion>
    // end::snippet[]
  );
}

accordion-content.tsimport '@vaadin/accordion';
import '@vaadin/text-field';
import '@vaadin/vertical-layout';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('accordion-content')
export class Example extends LitElement {
  static override styles = css`
    a {
      text-decoration: none;
      color: var(--lumo-primary-text-color);
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
        <!-- end::snippet[] -->

        <vaadin-accordion-panel summary="Customers">
          <vaadin-vertical-layout>
            <a href="#">Accounts</a>
            <a href="#">Contacts</a>
          </vaadin-vertical-layout>
        </vaadin-accordion-panel>

        <vaadin-accordion-panel summary="Finances">
          <vaadin-vertical-layout>
            <a href="#">Invoices</a>
            <a href="#">Transactions</a>
            <a href="#">Statements</a>
          </vaadin-vertical-layout>
        </vaadin-accordion-panel>
        <!-- tag::snippet[] -->
      </vaadin-accordion>
      <!-- end::snippet[] -->
    `;
  }
}

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.

Open in a
new tab

Source code

AccordionFilledPanels.javapackage com.vaadin.demo.component.accordion;

import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.accordion.AccordionPanel;
import com.vaadin.flow.component.details.DetailsVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("accordion-filled-panels")
public class AccordionFilledPanels extends Div {

    public AccordionFilledPanels() {
        // tag::snippet[]
        Accordion accordion = new Accordion();
        // end::snippet[]

        Span name = new Span("Sophia Williams");
        Span email = new Span("sophia.williams@company.com");
        Span phone = new Span("(501) 555-9128");

        VerticalLayout personalInformationLayout = new VerticalLayout(name,
                email, phone);
        personalInformationLayout.setSpacing(false);
        personalInformationLayout.setPadding(false);

        // tag::snippet[]
        AccordionPanel personalInfoPanel = accordion.add("Personal information",
                personalInformationLayout);
        personalInfoPanel.addThemeVariants(DetailsVariant.FILLED);
        // end::snippet[]

        Span street = new Span("4027 Amber Lake Canyon");
        Span zipCode = new Span("72333-5884 Cozy Nook");
        Span city = new Span("Arkansas");

        VerticalLayout billingAddressLayout = new VerticalLayout();
        billingAddressLayout.setSpacing(false);
        billingAddressLayout.setPadding(false);
        billingAddressLayout.add(street, zipCode, city);

        AccordionPanel billingAddressPanel = accordion.add("Billing address",
                billingAddressLayout);
        billingAddressPanel.addThemeVariants(DetailsVariant.FILLED);

        Span cardBrand = new Span("Mastercard");
        Span cardNumber = new Span("1234 5678 9012 3456");
        Span expiryDate = new Span("Expires 06/21");

        VerticalLayout paymentLayout = new VerticalLayout();
        paymentLayout.setSpacing(false);
        paymentLayout.setPadding(false);
        paymentLayout.add(cardBrand, cardNumber, expiryDate);

        AccordionPanel paymentPanel = accordion.add("Payment", paymentLayout);
        paymentPanel.addThemeVariants(DetailsVariant.FILLED);

        add(accordion);
    }

}
accordion-filled-panels.tsximport React from 'react';
import { Accordion, AccordionPanel, VerticalLayout } from '@vaadin/react-components';

function Example() {
  return (
    // tag::snippet[]
    <Accordion>
      <AccordionPanel summary="Personal information" theme="filled">
        <VerticalLayout>
          <span>Sophia Williams</span>
          <span>sophia.williams@company.com</span>
          <span>(501) 555-9128</span>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Billing address" theme="filled">
        <VerticalLayout>
          <span>4027 Amber Lake Canyon</span>
          <span>72333-5884 Cozy Nook</span>
          <span>Arkansas</span>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Payment" theme="filled">
        <VerticalLayout>
          <span>MasterCard</span>
          <span>1234 5678 9012 3456</span>
          <span>Expires 06/21</span>
        </VerticalLayout>
      </AccordionPanel>
    </Accordion>
    // end::snippet[]
  );
}

accordion-filled-panels.tsimport '@vaadin/accordion';
import '@vaadin/text-field';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('accordion-filled-panels')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
        <!-- end::snippet[] -->

        <vaadin-accordion-panel summary="Billing address" theme="filled">
          <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" theme="filled">
          <vaadin-vertical-layout>
            <span>MasterCard</span>
            <span>1234 5678 9012 3456</span>
            <span>Expires 06/21</span>
          </vaadin-vertical-layout>
        </vaadin-accordion-panel>
        <!-- tag::snippet[] -->
      </vaadin-accordion>
      <!-- end::snippet[] -->
    `;
  }
}

Small Panels

Use the small theme variant for compact UIs.

Open in a
new tab

Source code

AccordionSmallPanels.javapackage com.vaadin.demo.component.accordion;

import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.accordion.AccordionPanel;
import com.vaadin.flow.component.details.DetailsVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("accordion-small-panels")
public class AccordionSmallPanels extends Div {

    public AccordionSmallPanels() {
        Accordion accordion = new Accordion();

        Span name = new Span("Sophia Williams");
        Span email = new Span("sophia.williams@company.com");
        Span phone = new Span("(501) 555-9128");

        VerticalLayout personalInformationLayout = new VerticalLayout(name,
                email, phone);
        personalInformationLayout.setSpacing(false);
        personalInformationLayout.setPadding(false);

        AccordionPanel personalInfoPanel = accordion.add("Personal information",
                personalInformationLayout);
        personalInfoPanel.addThemeVariants(DetailsVariant.SMALL);

        Span street = new Span("4027 Amber Lake Canyon");
        Span zipCode = new Span("72333-5884 Cozy Nook");
        Span city = new Span("Arkansas");

        VerticalLayout billingAddressLayout = new VerticalLayout();
        billingAddressLayout.setSpacing(false);
        billingAddressLayout.setPadding(false);
        billingAddressLayout.add(street, zipCode, city);

        AccordionPanel billingAddressPanel = accordion.add("Billing address",
                billingAddressLayout);
        billingAddressPanel.addThemeVariants(DetailsVariant.SMALL);

        Span cardBrand = new Span("Mastercard");
        Span cardNumber = new Span("1234 5678 9012 3456");
        Span expiryDate = new Span("Expires 06/21");

        VerticalLayout paymentLayout = new VerticalLayout();
        paymentLayout.setSpacing(false);
        paymentLayout.setPadding(false);
        paymentLayout.add(cardBrand, cardNumber, expiryDate);

        // tag::snippet[]
        AccordionPanel paymentPanel = accordion.add("Payment", paymentLayout);
        paymentPanel.addThemeVariants(DetailsVariant.SMALL);
        // end::snippet[]

        add(accordion);
    }

}
accordion-small-panels.tsximport React from 'react';
import { Accordion, AccordionPanel, VerticalLayout } from '@vaadin/react-components';

function Example() {
  return (
    // tag::snippet[]
    <Accordion>
      <AccordionPanel summary="Personal information" theme="small">
        <VerticalLayout>
          <span>Sophia Williams</span>
          <span>sophia.williams@company.com</span>
          <span>(501) 555-9128</span>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Billing address" theme="small">
        <VerticalLayout>
          <span>4027 Amber Lake Canyon</span>
          <span>72333-5884 Cozy Nook</span>
          <span>Arkansas</span>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Payment" theme="small">
        <VerticalLayout>
          <span>MasterCard</span>
          <span>1234 5678 9012 3456</span>
          <span>Expires 06/21</span>
        </VerticalLayout>
      </AccordionPanel>
    </Accordion>
    // end::snippet[]
  );
}

accordion-small-panels.tsimport '@vaadin/accordion';
import '@vaadin/text-field';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('accordion-small-panels')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
        <!-- end::snippet[] -->

        <vaadin-accordion-panel summary="Billing address" theme="small">
          <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" theme="small">
          <vaadin-vertical-layout>
            <span>MasterCard</span>
            <span>1234 5678 9012 3456</span>
            <span>Expires 06/21</span>
          </vaadin-vertical-layout>
        </vaadin-accordion-panel>
        <!-- tag::snippet[] -->
      </vaadin-accordion>
      <!-- end::snippet[] -->
    `;
  }
}

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.

Open in a
new tab

Source code

AccordionReversePanels.javapackage com.vaadin.demo.component.accordion;

import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.accordion.AccordionPanel;
import com.vaadin.flow.component.details.DetailsVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("accordion-reverse-panels")
public class AccordionReversePanels extends Div {

    public AccordionReversePanels() {
        Accordion accordion = new Accordion();

        Span name = new Span("Sophia Williams");
        Span email = new Span("sophia.williams@company.com");
        Span phone = new Span("(501) 555-9128");

        VerticalLayout personalInformationLayout = new VerticalLayout(name,
                email, phone);
        personalInformationLayout.setSpacing(false);
        personalInformationLayout.setPadding(false);

        AccordionPanel personalInfoPanel = accordion.add("Personal information",
                personalInformationLayout);
        personalInfoPanel.addThemeVariants(DetailsVariant.REVERSE);

        Span street = new Span("4027 Amber Lake Canyon");
        Span zipCode = new Span("72333-5884 Cozy Nook");
        Span city = new Span("Arkansas");

        VerticalLayout billingAddressLayout = new VerticalLayout();
        billingAddressLayout.setSpacing(false);
        billingAddressLayout.setPadding(false);
        billingAddressLayout.add(street, zipCode, city);

        AccordionPanel billingAddressPanel = accordion.add("Billing address",
                billingAddressLayout);
        billingAddressPanel.addThemeVariants(DetailsVariant.REVERSE);

        Span cardBrand = new Span("Mastercard");
        Span cardNumber = new Span("1234 5678 9012 3456");
        Span expiryDate = new Span("Expires 06/21");

        VerticalLayout paymentLayout = new VerticalLayout();
        paymentLayout.setSpacing(false);
        paymentLayout.setPadding(false);
        paymentLayout.add(cardBrand, cardNumber, expiryDate);

        // tag::snippet[]
        AccordionPanel paymentPanel = accordion.add("Payment", paymentLayout);
        paymentPanel.addThemeVariants(DetailsVariant.REVERSE);
        // end::snippet[]

        add(accordion);
    }

}
accordion-reverse-panels.tsximport React from 'react';
import { Accordion, AccordionPanel, VerticalLayout } from '@vaadin/react-components';

function Example() {
  return (
    // tag::snippet[]
    <Accordion>
      <AccordionPanel summary="Personal information" theme="reverse">
        <VerticalLayout>
          <span>Sophia Williams</span>
          <span>sophia.williams@company.com</span>
          <span>(501) 555-9128</span>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Billing address" theme="reverse">
        <VerticalLayout>
          <span>4027 Amber Lake Canyon</span>
          <span>72333-5884 Cozy Nook</span>
          <span>Arkansas</span>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Payment" theme="reverse">
        <VerticalLayout>
          <span>MasterCard</span>
          <span>1234 5678 9012 3456</span>
          <span>Expires 06/21</span>
        </VerticalLayout>
      </AccordionPanel>
    </Accordion>
    // end::snippet[]
  );
}

accordion-reverse-panels.tsimport '@vaadin/accordion';
import '@vaadin/text-field';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('accordion-reverse-panels')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
        <!-- end::snippet[] -->

        <vaadin-accordion-panel summary="Billing address" theme="reverse">
          <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" theme="reverse">
          <vaadin-vertical-layout>
            <span>MasterCard</span>
            <span>1234 5678 9012 3456</span>
            <span>Expires 06/21</span>
          </vaadin-vertical-layout>
        </vaadin-accordion-panel>
        <!-- tag::snippet[] -->
      </vaadin-accordion>
      <!-- end::snippet[] -->
    `;
  }
}

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.

Open in a
new tab

Source code

AccordionDisabledPanels.javapackage com.vaadin.demo.component.accordion;

import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.accordion.AccordionPanel;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("accordion-disabled-panels")
public class AccordionDisabledPanels extends Div {

    public AccordionDisabledPanels() {
        // tag::snippet[]
        Accordion accordion = new Accordion();
        // end::snippet[]

        Span name = new Span("Sophia Williams");
        Span email = new Span("sophia.williams@company.com");
        Span phone = new Span("(501) 555-9128");

        VerticalLayout personalInformationLayout = new VerticalLayout(name,
                email, phone);
        personalInformationLayout.setSpacing(false);
        personalInformationLayout.setPadding(false);

        accordion.add("Personal information", personalInformationLayout);

        Span street = new Span("4027 Amber Lake Canyon");
        Span zipCode = new Span("72333-5884 Cozy Nook");
        Span city = new Span("Arkansas");

        VerticalLayout billingAddressLayout = new VerticalLayout();
        billingAddressLayout.setSpacing(false);
        billingAddressLayout.setPadding(false);
        billingAddressLayout.add(street, zipCode, city);

        // tag::snippet[]
        AccordionPanel billingAddressPanel = accordion.add("Billing address",
                billingAddressLayout);
        billingAddressPanel.setEnabled(false);
        // end::snippet[]

        Span cardBrand = new Span("Mastercard");
        Span cardNumber = new Span("1234 5678 9012 3456");
        Span expiryDate = new Span("Expires 06/21");

        VerticalLayout paymentLayout = new VerticalLayout();
        paymentLayout.setSpacing(false);
        paymentLayout.setPadding(false);
        paymentLayout.add(cardBrand, cardNumber, expiryDate);

        AccordionPanel paymentPanel = accordion.add("Payment", paymentLayout);
        paymentPanel.setEnabled(false);

        add(accordion);
    }

}
accordion-disabled-panels.tsximport React from 'react';
import { Accordion, AccordionPanel, VerticalLayout } from '@vaadin/react-components';

function Example() {
  return (
    // tag::snippet[]
    <Accordion>
      <AccordionPanel summary="Personal information">
        <VerticalLayout>
          <span>Sophia Williams</span>
          <span>sophia.williams@company.com</span>
          <span>(501) 555-9128</span>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Billing address" disabled>
        <VerticalLayout>
          <span>4027 Amber Lake Canyon</span>
          <span>72333-5884 Cozy Nook</span>
          <span>Arkansas</span>
        </VerticalLayout>
      </AccordionPanel>

      <AccordionPanel summary="Payment" disabled>
        <VerticalLayout>
          <span>MasterCard</span>
          <span>1234 5678 9012 3456</span>
          <span>Expires 06/21</span>
        </VerticalLayout>
      </AccordionPanel>
    </Accordion>
    // end::snippet[]
  );
}

accordion-disabled-panels.tsimport '@vaadin/accordion';
import '@vaadin/text-field';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('accordion-disabled-panels')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }
}

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.

Component	Usage Recommendation
Details	Single collapsible panel.
Tabs	Component for organizing and grouping content into navigable sections.

Component

Usage Recommendation

Details

Single collapsible panel.

Tabs

Component for organizing and grouping content into navigable sections.

FAE6DC0A-C9CA-408C-B678-1B728ED61F39

Docs

Docs

Accordion

Anatomy

Summary

Content

Theme Variants

Filled Panels

Small Panels

Reverse Panels

Disabled Panels

Best Practices

Docs

Anatomy

Summary

Content

Theme Variants

Filled Panels

Small Panels

Reverse Panels

Disabled Panels

Best Practices

Related Components