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 ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LivebrandtoneOpen all variants in Storybook ↗

Edit JSX — preview updates livereact-live

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@avala/design";

<Accordion>
  <AccordionContent />
  <AccordionItem />
  <AccordionTrigger />
</Accordion>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

patterns-accordion--defaultOpen in Storybook →

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.