> Markdown version of [Accordion](https://vaadin.com/docs/next/components/accordion). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# 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 any time.

**Lit** — `accordion-basic.ts`

```html
<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>
```

**Flow** — `AccordionBasic.java`

```java
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);
```

**React** — `accordion-basic.tsx`

```tsx
<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>
```

## <a id="anatomy"></a>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](https://vaadin.com/docs/next/components/details.md) component to allow multiple, simultaneously expanded sections.

### <a id="summary"></a>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.

**Lit** — `accordion-summary.ts`

```typescript
<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 theme="spacing">
        Customer details
        ${
          this.customerComplete
            ? html`
                <vaadin-icon
                  icon="vaadin:check"
                  style="--vaadin-icon-size: 1rem"
                ></vaadin-icon>
              `
            : nothing
        }
      </vaadin-horizontal-layout>
    </vaadin-accordion-heading>
  </vaadin-accordion-panel>
</vaadin-accordion>
```

**Flow** — `AccordionSummary.java`

```java
Button customDetailsButton = new Button("Continue", (e) -> {
        billingAddressPanel.setOpened(true);
        customDetailsPanel
                .setSummary(createCompletedSummary(CUSTOMER_DETAILS));
    });

private HorizontalLayout createCompletedSummary(String title) {
    HorizontalLayout layout = new HorizontalLayout();
    layout.setSpacing(true);
    layout.setAlignItems(FlexComponent.Alignment.CENTER);

    layout.add(title);

    Icon icon = VaadinIcon.CHECK.create();
    icon.getStyle().set("--vaadin-icon-size", "1rem");
    layout.add(icon);

    return layout;
}
```

**React** — `accordion-summary.tsx`

```tsx
<AccordionPanel>
  <AccordionHeading slot="summary">
    <HorizontalLayout theme="spacing">
      Customer details
      {customerComplete.value && (
        <Icon icon="vaadin:check" style={{ '--vaadin-icon-size': '1rem' }} />
      )}
    </HorizontalLayout>
  </AccordionHeading>
  <VerticalLayout theme="spacing">
    <FormLayout responsiveSteps={responsiveSteps}>
      <TextField label="First name" />
      <TextField label="Last name" />
      <EmailField label="Email address" data-colspan="2" />
      <TextField label="Phone number" data-colspan="2" />
    </FormLayout>

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

### <a id="content"></a>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.

**Lit** — `accordion-content.ts`

```html
<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>
```

**Flow** — `AccordionContent.java`

```java
Accordion accordion = new Accordion();

accordion.add("Analytics",
        createContent(createStyledAnchor("#", "Dashboard"),
                createStyledAnchor("#", "Reports"),
                createStyledAnchor("#", "Data sources")));
```

**React** — `accordion-content.tsx`

```tsx
<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>
```

## <a id="disabled-panels"></a>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.

**Lit** — `accordion-disabled-panels.ts`

```html
<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>
```

**Flow** — `AccordionDisabledPanels.java`

```java
Accordion accordion = new Accordion();
AccordionPanel billingAddressPanel = accordion.add("Billing address",
        billingAddressLayout);
billingAddressPanel.setEnabled(false);
```

**React** — `accordion-disabled-panels.tsx`

```tsx
<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>
```

## <a id="accessibility"></a>Accessibility

Each panel’s summary is rendered as a heading — an element with `role="heading"` that wraps a button — and the panel’s content as a region labeled by that heading, as recommended by the WAI-ARIA accordion pattern. Screen readers can therefore list the summaries as headings and announce whether each panel is expanded or collapsed.

By default, the headings have no level, so screen readers announce them at their default level. The `aria-level` attribute can be customized (since V25.3) to match the surrounding page structure — for example, level 3 inside a section with an `<h2>` title:

```java
accordion.setHeadingLevel(3);
```

```html
<vaadin-accordion heading-level="3">
```

```tsx
<Accordion headingLevel={3}>
```

The same level is applied to all panel headings.

## <a id="best-practices"></a>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](https://vaadin.com/docs/next/components/accordion/styling.md#filled-panels) and apply [tooltips](https://vaadin.com/docs/next/components/tooltip.md) on the panels to make this more discoverable.

## <a id="related-components"></a>Related Components

| Component                                                     | Usage Recommendation                                                   |
| ------------------------------------------------------------- | ---------------------------------------------------------------------- |
| [Details](https://vaadin.com/docs/next/components/details.md) | Single collapsible panel.                                              |
| [Tabs](https://vaadin.com/docs/next/components/tabs.md)       | Component for organizing and grouping content into navigable sections. |

`FAE6DC0A-C9CA-408C-B678-1B728ED61F39`