Collapsible
An interactive collapsible section for toggling content visibility.
collapsible-demo.app
Installation
terminal.sh
npx y2kui@latest add collapsibleUsage
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible"
<Collapsible>
<CollapsibleTrigger>Toggle content</CollapsibleTrigger>
<CollapsibleContent>
<p>This content can be shown or hidden.</p>
</CollapsibleContent>
</Collapsible>Props
The <Collapsible /> component is built on top of Radix Collapsible. It accepts all Radix Collapsible Root props.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | false | Whether the collapsible is open by default. |
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Callback when open state changes. |
disabled | boolean | false | Disables the collapsible. |