Data Display

Collapsible

One trigger, one panel. Base UI's Collapsible re-exported unstyled — it wires the ARIA and the open state and paints nothing, so the panel looks like whatever you put in it.

Sourcesrc/components/ui/collapsible.tsx

Import

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@mikenotthepope/substrateui"

Composition

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Collapsible or Accordion

Collapsible is one panel. Accordion is a set of them that know about each other, so opening one can close the last. If you find yourself keeping several Collapsibles in step with shared state, you wanted an Accordion.

Collapsible also ships no styling at all. Accordion brings a divider rule, padding, and a rotating chevron; Collapsible brings the behaviour and leaves the surface to you.

Open on first render

defaultOpen starts the panel expanded without making the component controlled. Reach for open and onOpenChange only when something outside also needs to close it.

at parseConfig (config.ts:42)
at loadTheme (theme.ts:18)

Accessibility

The trigger carries aria-expanded and aria-controls, and the panel is removed from the accessibility tree while closed. Pass a real button through render — the default is a bare element and a div with a click handler is unreachable by keyboard.

The trigger's text should say what the panel holds. "Show advanced options" works; "Show more" leaves a screen-reader user to expand it to find out.

API Reference

These are Base UI's Collapsible parts re-exported without changes — see the Base UI collapsible docs for the full surface, including the CSS variables the panel exposes for height animation.

Prop	Type	Default	Description
`open`	`boolean`	—	The controlled open state.
`defaultOpen`	`boolean`	`false`	Open on first render, when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	—	Fired when the panel should open or close.
`disabled`	`boolean`	`false`	Disable the trigger.