Accordion

Carbon-spec accordion. Wraps Radix Accordion. Single or multiple expanded items, with a chevron that rotates on open.

patternsstablea11y: untested3/3 coverageEdit on GitHub ↗
patterns-accordion--defaultOpen all variants →

When to use

  • A vertical stack of related sections that share open/close coordination (FAQ, settings groups, "what's included" lists).
  • Dense content where the user needs to scan headers and dive into one or two sections at a time.

When not to use

  • A single standalone section with no siblings → use `Disclosure`. Disclosure does not coordinate state across siblings.
  • Tab-like content switching where exactly one of N panels is always visible → use `Tabs`.
  • Marketing FAQ where every Q can stay open at once and there's no header chrome → also use Disclosure stacked.