Skip to content
LyEve UI v0.60.1

Layout & display

Accordion

Stack collapsible sections. Each <AccordionItem> is a details element, so the browser opens and closes it and an accordion works on a page that runs no script. Only one item opens at a time unless you pass multiple to <Accordion>.

Single open

The items share a name, so when you open one the browser closes the one that was open. The title is plain text, never a heading, because a heading inside a summary breaks several screen readers. Put a heading above the accordion to name the group:

Shipping and returns

When will my order ship?
Same business day if you order before 2pm UTC. Tracking lands in your inbox.
What's the returns policy?
30 days, no questions asked. We pay return shipping in the EU and US.
Can I order in custom sizes?
Yes: drop us a line at custom@example.com with your specs.

Multiple open

With multiple the items share no name, and each one opens and closes on its own.

Section A
First panel.
Section B
Second panel.
Section C
Third panel.

Flush variant

Use flush when the accordion sits inside another bordered surface, such as a Card or a Drawer. It drops the outer border and the corner radius:

Tighter framing
No outer border.
Just dividers
Items still separated by lines.

Finding an item

An item's id is the id of its details element, so it must be unique on the page. A link can point at it, and a script finds the item by it and reads its open property to know whether it is open. The browser reports each item's state to a screen reader itself, so the item carries no aria-expanded and its body no region role.

The shared name counts from the start of each server render. If you put a page together from several renders, give each render its own idPrefix, or two accordions on the page share a name and opening an item in one closes the other's.

API · Accordion

PropTypeDefaultDescription
multiple booleanfalseAllow more than one item open at a time. The items then share no name.
flush booleanfalseDrop the outer border + radius (for embedding).
class string no defaultExtra classes on the wrapper.
children requiredSnippet no defaultAccordionItem instances.

API · AccordionItem

PropTypeDefaultDescription
id requiredstring no defaultThe id of the item's details element. Unique on the page.
title requiredstring no defaultPlain text shown in the item's summary. Never a heading.
class string no defaultExtra classes on the details element.
children requiredSnippet no defaultPanel content.