Accordion

Accordions contain creation flows and allow lightweight editing of an element.

Basic

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Accordion 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Accordion 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

<me-accordion> <me-accordion-summary>Accordion 1</me-accordion-summary> <me-accordion-details> <me-typography>Content goes here.</me-typography> </me-accordion-details> </me-accordion>

Expanded by Default

Panel 1

Content for panel 1.

Panel 2 (starts open)

This accordion starts expanded.

Panel 3

Content for panel 3.

Disabled

Normal Accordion

Content.

Disabled Accordion

You can't open this one.

Controlled (only one open at a time)

General settings

Nunc vitae orci ultricies, auctor nunc in, volutpat nisl.

Users

Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus.

Advanced settings

Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer vulputate.

API — Accordion

Attribute / Property	Type	Default	Description
`expanded`	boolean	false	Whether the accordion is open.
`disabled`	boolean	false	Disables expand/collapse interaction.

API — AccordionSummary

Slot	Description
default	Summary label content.
`expand-icon`	Custom expand icon (replaces the default chevron).

Events

Event	Detail	Description
`me-change`	`{ expanded: boolean }`	Fired on the Accordion when the expanded state changes.