Collapsible

Expand or hide a panel in place — show more lists, advanced form fields, order details, or nested trees. Prefer Accordion when you need exclusive open sections.

Show More

Keep a short list visible, then expand the rest with a labeled trigger.

Installation

CLI

npx @sonojs/ui@latest add collapsible

Composition

structure

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Usage

collapsible.tsx

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Show details</CollapsibleTrigger>
      <CollapsibleContent>
        Extra content that was hidden.
      </CollapsibleContent>
    </Collapsible>
  )
}

Props

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial open state.
onOpenChange	(open: boolean) => void	—	Called when the open state changes.
disabled	boolean	false	Prevents opening and closing.
asChild	boolean	false	On `CollapsibleTrigger` — merge props onto a child (e.g. `Button`).