Collapsible | Surflane

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

Disable disclosure

Usage

Expand one group of supplementary information in place. The Trigger and Panel share the same horizontal padding.

Use Accordion for several related sections. Don't expect Escape to close it as it closes a modal. Close it with the Trigger instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Collapsible.Root → Trigger + Panel(content body)

Keyboard and accessibility

Tab to the Trigger. Enter or Space opens and closes the Panel. With keepMounted, the closed Panel keeps its input state.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Collapsible } from '@surflane/ui'

<Collapsible.Root>
  <Collapsible.Trigger>Technical details</Collapsible.Trigger>
  <Collapsible.Panel keepMounted>Redacted build logs</Collapsible.Panel>
</Collapsible.Root>

Key API

Collapsible — common wrapper props
Prop	Contract	Default
`Root.open / defaultOpen / onOpenChange`	controlled / uncontrolled state	— / false
`Root.disabled`	disable the Trigger	false
`Panel.keepMounted / hiddenUntilFound`	keep state while closed / reveal on browser find	false

The table lists the common wrapper's main props. See the package type declarations for the full types.