---
title: Accordion
description: 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>

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

## Props

<Property name="title" type="string" optional>
  The title of the accordion.
</Property>

---

<Property name="defaultOpen" type="boolean" optional>
  Whether or not the accordion should be open by default. Defaults to `false`.
</Property>

---

<Property name="icon" type="string" optional>
  The icon to display next to the accordion title.
</Property>

## Accordion Groups

To group accordions into a single display unit, use the `<AccordionGroup>` component, with each
`<Accordion>` component as a child:

<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>

```jsx
<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>
```