Accordion

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

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

<Accordion defaultValue={["item-1"]} className="w-full">
  <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 comes with default styles that match the other Cubix
      components.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. The content opens and closes with a height animation.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Installation

pnpm dlx cubix@latest add accordion --base aria

Usage

Import

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

Example

<Accordion defaultValue={["item-1"]} className="w-full">
  <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 comes with default styles that match the other Cubix
      components.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. The content opens and closes with a height animation.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Multiple

Set multiple to keep more than one item open at a time.

Yes. Pass multiple to keep more than one section open.

Pass an array to defaultValue or value when multiple is set.

<Accordion multiple defaultValue={["item-1", "item-3"]} className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Can I open several items?</AccordionTrigger>
    <AccordionContent>
      Yes. Pass multiple to keep more than one section open.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Does it work in forms?</AccordionTrigger>
    <AccordionContent>
      Accordion is a disclosure pattern, not a form control. Put form
      fields inside the content when you need them.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Can items start open?</AccordionTrigger>
    <AccordionContent>
      Pass an array to defaultValue or value when multiple is set.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Single item

Omit multiple so only one item is open at a time. Click the open item to close it.

Opening another item closes this one. Click the trigger again to collapse it.

<Accordion defaultValue={["item-1"]} className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Only one open</AccordionTrigger>
    <AccordionContent>
      Opening another item closes this one. Click the trigger again to collapse it.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Switch to this section</AccordionTrigger>
    <AccordionContent>
      The previous item closes automatically.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Disabled

This item can be opened and closed.

<Accordion defaultValue={["item-1"]} className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Available</AccordionTrigger>
    <AccordionContent>
      This item can be opened and closed.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2" disabled>
    <AccordionTrigger>Unavailable</AccordionTrigger>
    <AccordionContent>
      This content cannot be reached while the item is disabled.
    </AccordionContent>
  </AccordionItem>
</Accordion>

RTL

Wrap the accordion in dir="rtl" and lang="fa" so layout, chevron placement, and IRANSans XV follow Persian.

بله. از الگوی WAI-ARIA پیروی می‌کند.

<div dir="rtl" lang="fa">
  <Accordion defaultValue={["item-1"]} className="w-full">
    <AccordionItem value="item-1">
      <AccordionTrigger>آیا در دسترس‌پذیر است؟</AccordionTrigger>
      <AccordionContent>
        بله. از الگوی WAI-ARIA پیروی می‌کند.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>آیا استایل دارد؟</AccordionTrigger>
      <AccordionContent>
        بله. استایل پیش‌فرض با بقیه کامپوننت‌های Cubix یکی است.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3">
      <AccordionTrigger>آیا انیمیشن دارد؟</AccordionTrigger>
      <AccordionContent>
        بله. محتوا با انیمیشن ارتفاع باز و بسته می‌شود.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</div>

API Reference

Accordion

The root that manages open state and keyboard movement between triggers.

Prop	Type	Default	Description
multiple	boolean	false	When true, more than one item can stay open at a time.
value	string[]	-	Controlled open values.
defaultValue	string[]	-	Initial open value(s) for uncontrolled usage.
onValueChange	(value: string[]) => void	-	Called when the open value(s) change.
className	string	-	Additional Tailwind classes merged with the root styles (last one wins).

AccordionItem

A single section. Wrap a trigger and content and give it a unique value.

Prop	Type	Default	Description
value	string	-	Unique value used to control this item. Required.
disabled	boolean	false	Disables the trigger and prevents this item from opening.
className	string	-	Additional Tailwind classes merged with the item styles (last one wins).

AccordionTrigger

The heading button that opens and closes the section.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the trigger styles (last one wins).
...props	React.ComponentProps<'button'>	-	All native button attributes are forwarded to the trigger.

AccordionContent

The collapsible panel revealed by the trigger.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the content styles (last one wins).
...props	React.ComponentProps<'div'>	-	All native div attributes are forwarded to the content panel.