Accordion
A collapsible section that hides its content until the reader expands it.
Use an accordion to tuck away supporting detail without removing it from the page. Wrap each <Accordion> in an <AccordionGroup>: the group provides the shared open-state behavior that a single accordion also needs.
<AccordionGroup>
<Accordion title="What does Save do?">
Save commits pending changes to the current branch without deploying.
</Accordion>
</AccordionGroup>Props
| Prop | Type | Default |
|---|---|---|
title | string | None |
value | string | Falls back to the title. |
Variants
Custom value
Set value when you want a stable ID for the accordion that's different from its title, useful if you later rename the title.
<AccordionGroup>
<Accordion title="What does Publish do?" value="publish-behavior">
Publish opens a pull request on a working branch, or deploys directly on the
default branch.
</Accordion>
</AccordionGroup>Accordion group
<AccordionGroup>
<Accordion title="First question">First answer.</Accordion>
<Accordion title="Second question">Second answer.</Accordion>
</AccordionGroup>