An accordion can be used to render collapsible content, useful for information which might not be relevant to all users.


Use the <Accordion> component to render an accordion, providing a title property.

<Accordion title="Click me to expand the accordion">This is collapsible content!</Accordion>
Click me to expand the accordion
This is collapsible content!

Default value#

Pass the defaultOpen prop to have the accordion open by default.

<Accordion defaultOpen title="Open by default">
  This is collapsible content!
Open by default

This is collapsible content!