rc-accordion

Accordion coordinator for child native <details> panels with single- or multiple-open behavior, following the WAI-ARIA Accordion pattern.

Package

@rcarls/rc-accordion

Element

<rc-accordion>

Native dependency

Coordinates native details children

State model

Single or multiple open panels

Main events

None

Related

Usage rulesTheme previews

Installation

npm

npm install @rcarls/rc-webcomponents@next

Yarn

yarn add @rcarls/rc-webcomponents@next

pnpm

pnpm add @rcarls/rc-webcomponents@next

import '@rcarls/rc-webcomponents/rc-accordion/define';

Usage

Place native <details> panels as direct children, each with a <summary> as its first child. Opening one panel closes the others unless multiple is set.

<rc-accordion>
  <details>
    <summary>Ingredients</summary>
    <p>Two cups of flour, one egg, and a pinch of salt.</p>
  </details>
  <details>
    <summary>Method</summary>
    <p>Mix, rest for ten minutes, then roll out.</p>
  </details>
</rc-accordion>

Live demo

Single open

Multiple open

Wrapped disclosures

Theming

The default demo mode shows the component without a package theme. Use the shared preview controls on this page to compare inherited, light, and dark color schemes or to apply the optional Material theme only inside the demo frames.

Accessibility

Keep each managed native <details> element as a direct child, or wrap it in a direct-child rc-disclosure, with a native <summary> as its first child. The native elements retain disclosure semantics, focus, and Enter/Space activation.

After upgrade, Arrow Up and Arrow Down move focus between summaries and wrap at the ends; Home and End move to the first and last summary. By default, opening a panel closes its open siblings. Add multiple when more than one panel may stay open. The optional name attribute is mirrored to managed native <details> children to preserve native exclusive grouping; author-provided child names are left unchanged.

API

Properties

Property	Markup	Type	Default	Description
multiple	JS property only	boolean	Not specified	Allows more than one panel open at a time.

CSS Custom Properties

Property	Default	Description
--rc-accordion-gap	0	Gap between panels. Panels take the shared `--rc-disclosure-*` properties, documented on `rc-disclosure`, for both supported child forms: a native `<details>` directly inside the accordion, and one wrapped in `rc-disclosure`.