Accordion

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

Installation

npx scrollx-ui@latest add accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

<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>
</Accordion>

API Reference

Accordion

Accordion is the root component.

• type - The type of accordion. Can be single or multiple.
• defaultValue - The default open item value(s).
• value - The controlled open item value(s).
• onValueChange - Event handler called when the value changes.
• collapsible - When type is single, allows closing content when clicking the trigger.

AccordionItem

AccordionItem contains a single accordion item.

• value - A unique value for the item.
• disabled - Whether the item is disabled or not.

AccordionTrigger

AccordionTrigger is the trigger button that toggles the accordion item.

AccordionContent

AccordionContent is the content that appears when the accordion item is expanded.