DISPLAY

Collapsible

Collapsible is a single disclosure section for progressive detail, optional context, or content that should stay out of the way until requested.

ONE DISCLOSURE

Open only what matters

Use defaultOpen for the first useful answer and keep the body as ordinary Dowe views.

PLAYGROUND

Reveal implementation notes

The header, arrow, content region, and open state are generated from one target-neutral component contract.

The generated header, arrow, and content region stay aligned across web, Android, and iOS.

portable
dowe
Collapsible label:"Route details" defaultOpen:true variant:"soft" scheme:"surface" rounded:"md"
  Text size:"sm" color:"muted"
    "The generated header, arrow, and content region stay aligned across targets."

Collapsible label:"Deferred details" variant:"outlined" scheme:"primary" rounded:"md"
  Text size:"sm" color:"muted"
    "Keep secondary guidance closed by default."

ADVANCED PATTERNS

Model a detail hierarchy

Use several focused Collapsible regions when the page has independent topics, and reserve disabled for a real unavailable state.

OPEN BY DEFAULT

Primary explanation

Lead with the one explanation that helps the user make the next decision.

QUIET DETAIL

Supporting context

UNAVAILABLE

Coming soon

dowe
Collapsible label:"Why this matters" defaultOpen:true variant:"solid" scheme:"primary"
  Text size:"sm" color:"onPrimary"
    "Lead with the explanation that helps the next decision."

Collapsible label:"Implementation note" variant:"ghost" scheme:"muted"
  Text size:"sm" color:"muted"
    "Keep low-priority context available without competing."

Collapsible label:"Native exporter" disabled:true variant:"soft" scheme:"warning"
  Text size:"sm" color:"muted"
    "Disabled communicates an unavailable body."

CHILDREN

Normal Dowe views

Use Text, Grid, Flex, Button, Badge, and other supported views inside the body.

STATE

Target-owned behavior

defaultOpen and disabled are declarative inputs; the generated target handles disclosure state and content motion.

API

Props

Collapsible also accepts the applicable common spacing, sizing, border, visibility, and accessibility props.

Prop
Type
Default

No data

There are no records to display