Accordion

A vertically stacked set of interactive headings that each reveal a section of content. Use it to condense long, scannable content — FAQs, settings groups, nested detail — into collapsible rows so the page stays short and the reader drills into only what they need. Reach for Collapsible instead when there is just one panel to expand, and Tabs when sections are mutually exclusive views rather than stacked content. Set type="single" for a one-at-a-time FAQ feel (add collapsible to allow closing the open row) and type="multiple" when readers may want several sections open at once. Items show a hairline divider by default; pass border={false} for a flush, borderless list inside cards or dense panels.

Single (default)

Yes. It adheres to the WAI-ARIA design pattern.

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="a">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="b">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>Yes. It uses Tidal semantic tokens.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="c">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>Yes. It animates height on open/close.</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple

<Accordion type="multiple">…</Accordion>

Borderless

<Accordion type="single" collapsible>
  <AccordionItem value="a" border={false}>
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

Props

ComponentNotable props
Accordiontype ("single" | "multiple"), collapsible, value, defaultValue, onValueChange
AccordionItemvalue (required), disabled, border (boolean, default true)
AccordionTriggerStandard button props. Chevron rotates on open; hover underlines the label.
AccordionContentAnimates height via data-state and accordion-up/down keyframes.

Source

packages/react/src/components/accordion.tsx · Figma node 2811:14800