Collapsible
A single-item show/hide component. Simpler than Accordion; use it for one expandable section like a filter panel, "show more" block, or settings group.
Installation
npx dafink-ui add collapsibleDemo
Composition
<Collapsible>
</Collapsible>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state. When provided the component is controlled. |
| defaultOpen | boolean | false | Uncontrolled initial open state. |
| onOpenChange | (open: boolean) => void | - | Called when the open state changes. Receives the new boolean value. |
| disabled | boolean | false | Disables the trigger and prevents toggling. |
| className | string | "" | Additional classes on the root div. |
Accessibility
Collapsible has no composite keyboard handling: the trigger is a single native button element reached and left via normal Tab order, so Enter and Space toggle it exactly the same way they would any other button, with no arrow-key or roving-tabindex behavior to document. The trigger carries aria-expanded reflecting the open state, and the content panel carries role="region" plus aria-hidden (true when closed, false when open); the panel is never unmounted and never gets the native hidden attribute, it collapses to zero height via a CSS grid-height transition instead.