Accordion

A set of sections that open and close.

import { Accordion } from 'components/UI/Accordion'

Basic

Use this for a list of sections, such as an FAQ. One item opens at a time by default. defaultValue sets the items that are open at first.

An all-in-one suite of product tools for engineers.

Use multiple when the user compares the content of two or more items. Set multiple on Accordion.Root to let more than one item stay open.

Trends, funnels, and retention for the events that you capture.

Watch recordings of real user sessions.

Set disabled on an Accordion.Item to stop it from opening. Its trigger text is muted.

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

For one region that you show or hide, such as advanced options, use Collapsible.
Accordion.Header renders an <h3>. Pass render={<h2 />} when the page outline needs another level.