Collapsible
A single trigger and panel for optional detail, with controlled and uncontrolled state.
Contract
| Axis | Values | Default |
|---|---|---|
| state | controlled open or uncontrolled defaultOpen | closed |
| availability | disabled | interactive |
| lifecycle | unmount, keepMounted, or hiddenUntilFound | unmount |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/collapsible.css';Scroll inside the code area to read long lines.
Imports
import { TRCollapsible } from '@tinyrack/ui/components/collapsible';Scroll inside the code area to read long lines.
Playground
The Playground keeps open as interaction state rather than a duplicate control. Configure availability, lifecycle, and trigger text; Reset restores the closed, unmounted default.
Usage
Controlled optional details permalink
The visible result updates after pointer, Enter, or Space activation.
Examples
API
TRCollapsible.Root
| Prop | Type / default | Purpose |
|---|---|---|
open / defaultOpen | boolean / undefined, false | controlled or initial uncontrolled expansion |
onOpenChange | (open, details) => void | reports trigger and browser-find changes |
disabled | boolean / false | keeps the trigger discoverable by focus while blocking state changes |
render, className, style, ref | Base UI root props | customize the <div> host while preserving behavior |
TRCollapsible.Trigger
Renders a button with aria-expanded and aria-controls. It accepts native button props, render, styles, and refs. Enter and Space toggle it while focus remains on the trigger; disabled triggers expose data-disabled and aria-disabled.
TRCollapsible.Panel
Use keepMounted when closed content must remain in the DOM, or hiddenUntilFound to render hidden="until-found" so browser page search can reveal it. hiddenUntilFound takes precedence when both are supplied. The default lifecycle unmounts after the closing transition. The panel exposes --collapsible-panel-height, --collapsible-panel-width, and transition attributes including data-starting-style and data-ending-style.
Closed SSR output follows the selected lifecycle and hydrates without changing the public relationship. Tinyrack CSS uses design-system motion tokens and removes decorative transitions under reduced motion. TRCollapsibleRoot, TRCollapsibleTrigger, TRCollapsiblePanel, their prop types, and their Base UI state types are exported from @tinyrack/ui/components/collapsible; CSS remains opt-in.