Accordion

Vertically collapsible content panels. Built on Radix Accordion with dashed-border styling. Supports single or multiple open panels.

Import

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "poyraz-ui/molecules";

Single (Collapsible)

Only one panel open at a time, can close all.

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It uses the brutalist dashed-border aesthetic.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple

Multiple panels can be open simultaneously.

<Accordion type="multiple">
  <AccordionItem value="a">
    <AccordionTrigger>Section A</AccordionTrigger>
    <AccordionContent>Content A</AccordionContent>
  </AccordionItem>
  <AccordionItem value="b">
    <AccordionTrigger>Section B</AccordionTrigger>
    <AccordionContent>Content B</AccordionContent>
  </AccordionItem>
</Accordion>