Accordion

Organize related content into expandable sections.

Live example

A reviewed public example, isolated from this page.

Open example 
import { Accordion } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

Anatomy

  • content<div>

    Inner wrapper for the expandable body (padding lives here; the animation lives on ::details-content).

    Uses native semantics

  • header<h3>

    The APG heading wrapper for the trigger label. Renders <h1>…<h6> from `level` (default 3) so heading navigation reaches every section; it lives INSIDE the <summary> because HTML requires <summary> to be the first child of <details>. Optional — a Trigger with bare text still works.

    ARIA role: heading

  • item<details>

    The native <details> element; [open] is the state, ::details-content animates the reveal.

    Uses native semantics

  • root<div>

    Group container (border + dividers).

    Uses native semantics

  • trigger<summary>

    The native <summary>; it must remain the Item's first child. Wrap its label in the header part to satisfy the APG heading requirement. Its disclosure marker remains in headless output and the opt-in theme replaces it with a decorative plus icon.

    Uses native semantics

Root properties

No component-specific root properties. Native host properties remain available.

Start building