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 collapsible

Demo

Composition

<Collapsible>
<CollapsibleTrigger />
<CollapsibleContent />
</Collapsible>

Props

NameTypeDefaultDescription
openboolean-Controlled open state. When provided the component is controlled.
defaultOpenbooleanfalseUncontrolled initial open state.
onOpenChange(open: boolean) => void-Called when the open state changes. Receives the new boolean value.
disabledbooleanfalseDisables the trigger and prevents toggling.
classNamestring""Additional classes on the root div.