ComponentsNavigation & disclosure

Collapsible

Shared primitive

Show optional detail within the current task.

@/components/ui/collapsible

Composition preview

Try Collapsible alongside its related navigation & disclosure components. These examples keep all actions local.

Your draft preview appears here.

Usage

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

<>
<Collapsible>
  <CollapsibleTrigger asChild><Button variant="outline">More details</Button></CollapsibleTrigger>
  <CollapsibleContent>Supporting context.</CollapsibleContent>
</Collapsible>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

open/defaultOpen, onOpenChange; CollapsibleTrigger, CollapsibleContent

Usage & accessibility

Disclosure composes native details/summary so open selectors, default opening, SSR and retained form state keep working.

Implementation contract

src/components/ui/collapsible.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.