Accordion

A stack of sections whose content expands and collapses under a heading, like an FAQ. Use with AccordionItem.

Layoutv0.1.0experimentalWCAG 2.2 AAView spec

Yes. rdloom add copies the source into your project. Change anything; upgrades merge into your edits.

import { Accordion, AccordionItem } from "@rdloom/react";

export default function AccordionBasicExample() {
  return (
    <div className="w-[32rem] max-w-full">
      <Accordion defaultExpandedKeys={["own"]}>
        <AccordionItem id="own" title="Do I own the code?">
          Yes. rdloom add copies the source into your project. Change anything; upgrades merge into your edits.
        </AccordionItem>
        <AccordionItem id="react" title="Which React version?">
          React 19, with Tailwind CSS v4.
        </AccordionItem>
        <AccordionItem id="a11y" title="Is it accessible?">
          Every component is built on React Aria and tested with axe, keyboard tests and a screen reader checklist.
        </AccordionItem>
      </Accordion>
    </div>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add accordion

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes. It needs react-aria-components; add --install to install them.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/accordion.json

Works, but without upgrade tracking.

Usage

import { Accordion, AccordionItem } from "@rdloom/react";

<div className="w-[32rem] max-w-full">
  <Accordion defaultExpandedKeys={["own"]}>
    <AccordionItem id="own" title="Do I own the code?">
      Yes. rdloom add copies the source into your project. Change anything; upgrades merge into your edits.
    </AccordionItem>
    <AccordionItem id="react" title="Which React version?">
      React 19, with Tailwind CSS v4.
    </AccordionItem>
    <AccordionItem id="a11y" title="Is it accessible?">
      Every component is built on React Aria and tested with axe, keyboard tests and a screen reader checklist.
    </AccordionItem>
  </Accordion>
</div>

Multiple

Name, photo and bio.

Plan, invoices and payment method.

import { Accordion, AccordionItem } from "@rdloom/react";

export default function AccordionMultipleExample() {
  return (
    <div className="w-[32rem] max-w-full">
      {/* Several sections open at once, e.g. for settings people compare. */}
      <Accordion allowsMultipleExpanded defaultExpandedKeys={["profile", "billing"]}>
        <AccordionItem id="profile" title="Profile">
          Name, photo and bio.
        </AccordionItem>
        <AccordionItem id="billing" title="Billing">
          Plan, invoices and payment method.
        </AccordionItem>
        <AccordionItem id="notifications" title="Notifications">
          Email and push preferences.
        </AccordionItem>
      </Accordion>
    </div>
  );
}

Disabled item

import { Accordion, AccordionItem } from "@rdloom/react";

export default function AccordionDisabledItemExample() {
  return (
    <div className="w-[32rem] max-w-full">
      <Accordion>
        <AccordionItem id="general" title="General">
          Workspace name and URL.
        </AccordionItem>
        <AccordionItem id="sso" title="Single sign-on (Enterprise plan)" isDisabled>
          SAML and SCIM settings.
        </AccordionItem>
        <AccordionItem id="danger" title="Danger zone">
          Transfer or delete the workspace.
        </AccordionItem>
      </Accordion>
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`allowsMultipleExpanded` Lets several sections be open at once. Otherwise opening one closes the others.	`boolean`	`false`
`defaultExpandedKeys` Sections open at first, by id, when uncontrolled.	`Iterable<Key>`	none
`expandedKeys` Controlled open sections, by id.	`Iterable<Key>`	none
`isDisabled` Disables every section.	`boolean`	`false`
`onExpandedChange` Called with the ids of the open sections.	`(keys: Set<Key>) => void`	none
`children`required AccordionItem elements.	`node`	none

Accessibility

Role group, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Tab moves between section headings
Enter or Space opens or closes the focused section

Screen readers announce

Each section is announced as a heading and a button, collapsed or expanded
Opening a section announces it as expanded; its content follows in reading order
Headings appear in the screen reader's headings list, for quick navigation

What your code must do

Each heading is a real heading (h3 by default) with a button inside, exposing aria-expanded
The button controls its panel (aria-controls), and the panel is labelled by the button
Collapsed content is removed from the tab order and hidden from screen readers
Expanding respects reduced motion

Guidelines

Use it when

FAQs and long help pages
Settings grouped into sections people rarely need all at once

Avoid it when

Content everyone needs: show it
Switching between views of the same thing: use Tabs

Don't

Nesting accordions inside accordions
Putting the only important information in a collapsed section

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-border-default
--rd-color-text-default
--rd-color-text-muted
--rd-color-surface-subtle
--rd-color-focus-ring
--rd-radius-control