Accordion

Use <Accordion> to hide optional content behind a clickable header. Accordions suit progressive disclosure (FAQs, troubleshooting notes, or detail that not every reader needs on first load).

Each accordion needs a title (the clickable header). Put any content (code blocks, callouts, or lists) inside the panel.

mdx

<Accordion title="Click to expand">Content here</Accordion>

Example

mdx

<Accordion title="Click to expand the accordion">
  This is collapsible content.

  You can nest other components inside an accordion. For example, a code block:

  ```js
  export function greet(name) {
    return `Hello, ${name}!`;
  }
  ```

  <Info>
    Callouts and other components work inside accordions as well.
  </Info>
</Accordion>

Properties

`Accordion`

titlestringrequired

The text shown on the panel trigger. Use short, scannable titles such as Installation or Troubleshooting.

Without a title, the accordion renders nothing.

defaultOpenbooleanoptional

Whether the panel starts expanded on first load.

Defaults to false.

`AccordionGroup`

typestringoptional

Controls how many panels in the group can be open at the same time.

"multiple" (default): readers can expand more than one panel.
- "single": only one panel stays open; opening another closes the rest.

Defaults to "multiple".

Accordion groups

Wrap related accordions in <AccordionGroup> so they share one bordered container. Each child must be an <Accordion>; other elements are ignored.

Set defaultOpen on individual items to choose which panels start expanded. In a type="single" group, only the first item with defaultOpen opens on load.

This panel starts expanded. Readers can collapse it like any other accordion.

mdx

<AccordionGroup>
  <Accordion defaultOpen title="Open by default">
    This panel starts expanded. Readers can collapse it like any other accordion.
  </Accordion>
  <Accordion title="Click to expand">
    Grouped accordions stack in a single panel. Add as many as you need.
  </Accordion>
  <Accordion title="Another section">
  - Optional setup steps
  - Advanced configuration
  - Related links
  </Accordion>
</AccordionGroup>

Use type="single" when panels are mutually exclusive, for example one answer per FAQ category.

mdx

<AccordionGroup type="single">
  <Accordion title="Billing">...</Accordion>
  <Accordion title="Authentication">...</Accordion>
  <Accordion title="Deployments">...</Accordion>
</AccordionGroup>

Behavior

Condition	Result
`title` omitted on `<Accordion>`	Renders nothing
No valid `<Accordion>` children in `<AccordionGroup>`	Renders nothing
`type="multiple"` (default)	Multiple panels can stay open
`type="single"`	Only one panel open at a time
Several items with `defaultOpen` in `type="single"`	Only the first matching item starts open
`defaultOpen` on items in `type="multiple"`	All matching items start open