Disclosure Controls

Accordion is the multi-section disclosure pattern: a vertical stack of headers, each revealing its own panel when clicked. It is composed from Accordion (the root), AccordionItem (one section), AccordionTrigger (the clickable header, with a built-in chevron), and AccordionContent (the revealed body). Use type="single" for one-open-at-a-time, or type="multiple" to let several panels stay open.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: accordion.tsx

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@beacon/design-system";

<Accordion type="single" collapsible className="w-full max-w-md">
  <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 components.</AccordionContent>
  </AccordionItem>
</Accordion>;

Parts

Part	Role
Accordion	Root container. Requires type="single" or type="multiple"; collapsible allows the open single item to close.
AccordionItem	One section, identified by a unique value.
AccordionTrigger	The header button that toggles its item; renders a chevron that rotates when open.
AccordionContent	The collapsible body of the item, animated open and closed.

AccordionItem, AccordionTrigger, and AccordionContent forward their Radix props, including className.

When to use

• FAQs and help content where each question reveals an answer.
• Long forms or settings broken into collapsible groups the user can open as needed.
• Sidebars and detail panels with several optional sections.

Do not use Accordion when you only have one region to toggle; reach for Collapsible instead.