ONE DISCLOSURE
Open only what matters
Use defaultOpen for the first useful answer and keep the body as ordinary Dowe views.
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.
Leave secondary guidance closed by default when it would interrupt the main task.
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
Ghost treatment keeps a low-priority note available without competing with the main content.
UNAVAILABLE
Coming soon
Disabled preserves the label and communicates that the body is not currently actionable.
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 dataThere are no records to display | ||