Skip to content
Components

Collapsible

Expand/collapse container that reveals its CollapsibleContent when open. Controlled via open/onOpenChange or uncontrolled via defaultOpen.

Finish options

Honed

Polished

Brushed

Usage

import { Collapsible, collapsibleAnatomy, CollapsibleContent, CollapsibleTrigger } from "@instruments/materia-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 - 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

PropTypeDefaultDescription
classNamestring

Also exports

  • componentCollapsible
  • constcollapsibleAnatomy
  • componentCollapsibleTrigger

Anatomy

Collapsible

collapsible

Expandable/collapsible content section

CollapsibleTrigger

collapsible-trigger

Button to toggle content

CollapsibleContent

collapsible-content

Collapsible content area