Collapsible

A headless single disclosure primitive: a button that shows and hides an associated panel, with controlled or uncontrolled open state and a disabled state.

Store these one-time recovery keys somewhere safe. Each key can be used a single time to regain access if you lose your authenticator.

Anatomy

The collapsible is assembled from three parts. Collapsible.Root provides the shared context, Collapsible.Trigger renders the toggle button, and Collapsible.Panel holds the content that is shown and hidden.

<script>
	import { Collapsible } from '@human-kit/ui';
</script>

<Collapsible.Root defaultOpen>
	<Collapsible.Trigger>Details</Collapsible.Trigger>
	<Collapsible.Panel>Hidden content revealed on toggle.</Collapsible.Panel>
</Collapsible.Root>

Controlled state

Bind open (or pair open with onOpenChange) to drive the panel from outside — for example from buttons elsewhere in the UI. Use defaultOpen instead when the collapsible should manage its own state.

Usage guidelines

  • Use open / onOpenChange for controlled state and defaultOpen for uncontrolled state.
  • Use disabled to prevent the trigger from toggling the panel.
  • Use forceMount on Collapsible.Panel when collapsed content must stay in the DOM.
  • For grouped disclosures where only one section opens at a time, use Accordion instead.

Accessibility

  • Collapsible.Trigger renders button semantics with aria-expanded and aria-controls pointing at the panel, following the WAI-ARIA disclosure pattern.
  • Collapsible.Panel is hidden + inert while collapsed and carries the id referenced by the trigger.
  • Enter/Space toggle the panel via native button activation.

API reference

Root

The disclosure container. Holds the open state and provides context to the trigger and panel.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-collapsible-root Identifies the root element.
data-disabled Present when the collapsible is disabled.
data-open Present while the panel is open.

Trigger

The toggle button. Shows and hides the panel via native button activation.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-collapsible-trigger Identifies the trigger element.
data-disabled Present when the collapsible is disabled.
data-open Present while the panel is open.

Panel

The content shown and hidden by the trigger. Hidden and inert while collapsed.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-closed Present while the panel is closed (with `forceMount` or during the exit transition).
data-collapsible-panel Identifies the panel element.
data-collapsible-panel-content Identifies the inner content wrapper used for height measurement.
data-ending-style Present for one frame as the panel starts closing, for exit transitions.
data-open Present while the panel is open.
data-starting-style Present for one frame as the panel starts opening, for enter transitions.