Collapsible

Reveal supporting details without leaving the current view.

Live example

A reviewed public example, isolated from this page.

import { Collapsible } 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.

panel<div>
Lazily mounted disclosure panel. keepMounted uses hidden; hiddenUntilFound uses hidden=until-found and beforematch. Exposes measured size variables and starting/ending motion hooks without imposing landmark semantics.
Uses native semantics
root<div>
Native-prop-forwarding state and layout container. Closed content is not rendered unless retention is explicitly requested.
Uses native semantics
trigger<button>
Named disclosure button. aria-expanded always mirrors open; aria-controls and data-panel-open are present only while open. Disabled remains focusable and non-button render paths receive full keyboard semantics.
Uses native semantics