Skip to content
← Inventory

Collapsible

Expand/collapse container that reveals its CollapsibleContent when open. Controlled via open/onOpenChange or uncontrolled via defaultOpen; it supplies open state to descendants through context for the content animation.

Finish options

Honed

Polished

Brushed

Usage

import { Collapsible, collapsibleAnatomy, CollapsibleContent, CollapsibleContext, CollapsibleContextValue, CollapsibleTrigger, useCollapsibleContext } from "@desk/ui/components/collapsible";

Best practices

  • Use Collapsible for a single expand/collapse region; reach for Accordion when you have a set of grouped items where selecting one can close the others.

  • Compose CollapsibleTrigger + CollapsibleContent inside it — the content reads open state from context to animate; a bare child won't expand.

  • Drive it uncontrolled with defaultOpen; only lift to open/onOpenChange when external state must sync (e.g. persisting the open panel).

Props

Also exports

  • componentCollapsible
  • constcollapsibleAnatomy
  • componentCollapsibleContent
  • componentCollapsibleContext
  • interfaceCollapsibleContextValue
  • componentCollapsibleTrigger
  • constuseCollapsibleContext

Anatomy

Collapsible

collapsible

Expandable/collapsible content section

CollapsibleTrigger

collapsible-trigger

Button to toggle content

CollapsibleContent

collapsible-content

Collapsible content area