Accordion Styling
Styling API reference for the Accordion component.
Style Variants
Accordion supports the following style variants. Variants must be applied to individual panels, not to the Accordion itself.
| Variant | Description | Supported by |
|---|---|---|
| Makes the panel’s boundaries visible | Aura, Lumo |
| Removes the padding from the panel content area | Aura |
| Used for compact UIs | Lumo |
| Places the toggle icon after the summary contents | Aura, Lumo |
Filled Panels
The filled style variant makes the panel’s boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI.
Source code
AccordionFilledPanels.java
package 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.tsx
import 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.ts
import '@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/demo/theme';
@customElement('accordion-filled-panels')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
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 style variant for compact UIs.
Source code
AccordionSmallPanels.java
package 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.tsx
import 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.ts
import '@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/demo/theme';
@customElement('accordion-small-panels')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
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 style variant places the toggle icon after the summary contents. This can be useful for aligning visually the summary with other content.
Source code
AccordionReversePanels.java
package 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.tsx
import 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.ts
import '@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/demo/theme';
@customElement('accordion-reverse-panels')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
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[] -->
`;
}
}
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.
- Root element
-
vaadin-accordion