Accordion
Group supporting details into concise, expandable sections.
Loading documentation…
MDX lets documentation combine Markdown, JSX, and interactive components.
Accordion keeps secondary information close to the main explanation without
making the page difficult to scan. Use its concise form for a single disclosure,
or combine it with AccordionItem when readers should be able to open several
related sections independently.
Use multiple when readers may need to compare answers. Without it, opening one
item closes the previously open item. Give each item a stable value when its
identity matters outside the current page.
Keep essential instructions visible in the article itself. Accordions work best for optional context, troubleshooting notes, or answers to common questions.
An accordion can hold rich MDX when readers need to drill into one part of a process at a time. This keeps a launch checklist approachable without losing the useful implementation detail.
A concise Accordion heading. Providing it creates a single
disclosure from the component's children.
Opens the simple disclosure initially. It defaults to false. In
a multi-item accordion, items manage their own initial state.
Allows more than one AccordionItem to be open at once. It
defaults to false.
The disclosure body in concise mode, or direct AccordionItem
elements in multi-item mode.
An AccordionItem heading. It defaults to
Details when omitted.
An optional stable identifier for an AccordionItem. A unique
value is generated when it is omitted.