Components/Accordion

Accordion

Vertically stacked set of interactive headings that each reveal an associated section of content.


Yes. It follows the WAI-ARIA design pattern and uses proper ARIA attributes.

Installation

npx ajaxui add accordion

Multiple open

Content A.

Content B.

Props

PropTypeDefault
multiplebooleanfalse
defaultValuestring | string[]
valuestring | string[]
onValueChange(value: string | string[]) => void

Anatomy

<Accordion type="single" collapsible>  // owns open state
  <AccordionItem value="a">           // one per panel
    <AccordionTrigger/>
    <AccordionContent/>
  </AccordionItem>
</Accordion>