Accordion
Display an accordion component with collapsible content panels.
Use the <Accordion /> component to collapsible content, useful for information which might not
be relevant to all users.
Example
<Accordion title="Click me to expand the accordion">This is collapsible content!</Accordion>
Props
titlestringoptionalThe title of the accordion.
defaultOpenbooleanoptionalWhether or not the accordion should be open by default. Defaults to false.
iconstringoptionalThe icon to display next to the accordion title.
Accordion Groups
To group accordions into a single display unit, use the <AccordionGroup> component, with each
<Accordion> component as a child:
This is collapsible content!
<AccordionGroup>
<Accordion defaultOpen title="Open by default">
This is collapsible content!
</Accordion>
<Accordion title="Click me to expand the accordion">
This is collapsible content!
</Accordion>
</AccordionGroup>