Collapsible

This is a headless disclosure component: a button that shows and hides one panel. You can control the open state, or you can let the component control it. The component also has 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 has three parts. Collapsible.Root gives the shared context. Collapsible.Trigger makes the button. Collapsible.Panel contains the content that the trigger shows and hides.

<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 use open with onOpenChange, to control the panel from your own code. That control can be in a different part of the page. Use defaultOpen when the component controls its own state.

Usage guidelines

  • Use open and onOpenChange when your own code controls the state. Use defaultOpen when the component controls the state.
  • Use disabled to stop the trigger.
  • Use forceMount on Collapsible.Panel when the content must stay in the DOM while the panel is closed.
  • For a set of sections where only one section opens at a time, use Accordion.

Accessibility

  • Collapsible.Trigger has button semantics with aria-expanded. Its aria-controls attribute points at the panel. This obeys the WAI-ARIA disclosure pattern.
  • While the panel is closed, Collapsible.Panel is hidden and inert. The panel has the id that the trigger points at.
  • The Enter key and the Space key open and close the panel, like a native button.

API reference

Root

The disclosure container. It holds the open state and gives the context to the trigger and to the 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 button. It shows and hides the panel, with 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 that the trigger shows and hides. While it is closed, it is hidden and inert.

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 element for the height measurement.
data-ending-style Present for one frame when the panel starts to close, for the exit transition.
data-open Present while the panel is open.
data-starting-style Present for one frame when the panel starts to open, for the enter transition.