Data Display

Accordion

Composite root that coordinates a stack of collapsible accordion-item panels with single or multiple expansion.

import { Accordion } from '@lostgradient/cinder/accordion';
disclosurecollapsible
01

Overview

A vertically stacked set of disclosure regions. The Accordion parent owns expansion state and provides a context the AccordionItem children read.

Usage

Accordion is a compound component. Import the parent and compose Accordion.Item via the namespace API.

svelte 
<script lang="ts">
  import { Accordion } from '@lostgradient/cinder/accordion';

  let expandedIds = $state<string[]>([]);
</script>

<Accordion bind:expandedIds multiple>
  <Accordion.Item id="one" title="One">First panel content.</Accordion.Item>
  <Accordion.Item id="two" title="Two">Second panel content.</Accordion.Item>
</Accordion>

The leaf remains importable individually for à-la-carte builds — see @lostgradient/cinder/accordion-item.

Accordion vs Collapsible

Collapsible is the single-panel counterpart to Accordion.

Use Accordion when you have multiple named sections sharing a parent, and opening one may close another. The panels intentionally omit role="region" to avoid polluting the page's landmark list — see accordion.a11y.md.

Use Collapsible for a single independent disclosure that benefits from a named landmark region, animated open/close, or a trigger label that reacts to state.

Why AccordionItem does not compose Collapsible

AccordionItem and Collapsible differ in enough dimensions that sharing internals would require adding an accordion-mode flag to Collapsible or removing role="region" conditionally — either change would alter Collapsible's public API and bleed accordion-specific concerns into a general-purpose primitive. Instead, they share the same visual vocabulary (heading button + chevron icon + panel) while keeping their semantics separate. See collapsible.a11y.md for a side-by-side comparison.

Live preview
02

When to use

Use when
  • Progressively disclosing several sections of content that share a parent heading.
  • Letting the consumer expand one or multiple panels at once via the multiple prop.
Avoid when
03

Examples

Basic accordion

Single-select: opening one item closes the others. Uses the Accordion namespace API.

Dense inspector accordion

Inspector panels can compact trigger and panel spacing with public Accordion.Item CSS variables.

Disabled item

A disabled Accordion.Item cannot be toggled.

Multiple open

With multiple={true}, any number of items can be open at once.

04

Props

Props for accordion
Name Type Default Required Bindable Description
multiple boolean false When true, multiple items may be expanded simultaneously.
expandedIds string[] [] bind The currently expanded item IDs. Bindable.
children snippet req AccordionItem children.
05

Accessibility

Tab
Moves focus to the next focusable element (accordion header buttons are in the natural tab order).
Shift + Tab
Moves focus to the previous focusable element.
Enter/ Space
When focus is on a header button, toggles the associated panel open or closed.
Each trigger is a native button exposing aria-expanded and aria-controls, so screen readers announce open/closed state.
Panels intentionally omit role="region" to keep the page's landmark list clean.
Disabled items set the native disabled attribute on their trigger, removing them from the tab order.