Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

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