Collapsible

Molecule
A single disclosure: one header (its title, or a custom trigger, plus a chevron that rotates when open) over one collapsible content panel.
src/molecules/collapsible
View in Surfaces & data

Playground

Every control sets a real prop of CollapsibleProps. The JSX below updates as you go.
Free 2-day shipping on orders over $50. Delivery in 3 to 5 business days otherwise.
Props
title
string
description
string
open
boolean
card
boolean
disabled
boolean
JSX · CollapsibleProps
<Collapsible title="Advanced options" open />

Variants

5 examples from src/molecules/collapsible/collapsible.md, each rendered live from its own JSX.
A universal React Native UI kit that renders natively on iOS and Android and on the web through React Native Web.
Open by default
<Collapsible title="What is Canvas?" defaultOpen>
A universal React Native UI kit that renders natively on iOS and Android and on the web through React Native Web.
</Collapsible>
Disabled
<Collapsible title="Advanced settings (coming soon)" disabled>
Not available yet.
</Collapsible>
Free 2-day shipping on orders over $50. Delivery in 3 to 5 business days otherwise.
Card surface
card gives the disclosure an outlined card container with inset header and content on web and Android. On iOS the default Collapsible already renders as the inset-grouped card, so card changes nothing there (a documented no-op).
<Collapsible card title="Shipping details" defaultOpen>
Free 2-day shipping on orders over $50. Delivery in 3 to 5 business days otherwise.
</Collapsible>
With descriptions
<Collapsible title="Notifications" description="Email, push, and digest frequency.">
Choose which events reach your inbox and which stay in the app.
</Collapsible>
Custom trigger
<Collapsible trigger={<Typography medium>Order #1024, 3 items</Typography>}>
Wireless mouse, USB-C cable, laptop stand. Estimated total $84.00.
</Collapsible>

States

Hover, focus and press are pinned so they can be compared side by side; the rest are real props.
Free 2-day shipping on orders over $50. Delivery in 3 to 5 business days otherwise.
default
Free 2-day shipping on orders over $50. Delivery in 3 to 5 business days otherwise.
hover
Free 2-day shipping on orders over $50. Delivery in 3 to 5 business days otherwise.
focus

Anatomy

Free 2-day shipping on orders over $50. Delivery in 3 to 5 business days otherwise.
1
Trigger
2
Chevron
3
Content
Dimmed parts appear only in some states or variants.

Props

12 props on CollapsibleProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
12 props
title
string
–
The default trigger label text.
description
string
–
The muted secondary line under the title in the default trigger anatomy (ignored when a custom trigger is given, which owns its own anatomy).
trigger
ReactNode
–
A custom trigger node; if provided, it renders as the pressable's content instead of the title text (the chevron still renders alongside).
card
boolean
false
Card surface: wraps the disclosure in an outlined card container with inset header and content (web/Android). On iOS the default Collapsible already renders as the inset-grouped card, so card is a no-op there.
reference
boolean
false
The reference-sheet card (a component page's sub-component props): the card corner on a hairline over the card fill, a 46 px toggle with the title in 600 14 and the description inline after it in the mono meta ink, and the content flush to the card's edges, for a reference attached DataTable (web/Android). On iOS the default Collapsible already renders as the inset-grouped card, so reference changes nothing there.
children *
ReactNode
–
The collapsible content. A string renders in the skin's content type; a ReactNode renders as-is.
open
boolean
false
Controlled open state. Pair with onOpenChange. Omit for uncontrolled.
onOpenChange
(open: boolean) => void
–
Called with the next open state whenever the header toggles.
defaultOpen
boolean
false
Initial open state for the uncontrolled case (read once, default false).
disabled
boolean
false
A disabled header does not toggle and reads dimmed.
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Enter
Space
Expands or collapses
ArrowUp
ArrowDown
Moves between headers
Home
End
First · last header
Semantics
Roles
button
States
disabled
expanded
ARIA on web
aria-expanded

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Prop
Type
Default
open
boolean
false
onOpenChange
(open: boolean) => void
–
items
AvatarMenuItem[]
–
Web
control 10 · field 10 · card 16 · Instrument Sans
Prop
Type
Default
open
boolean
false
onOpenChange
(open: boolean) => void
–
items
AvatarMenuItem[]
–
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Prop
Type
Default
open
boolean
false
onOpenChange
(open: boolean) => void
–
items
AvatarMenuItem[]
–
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Collapsible title="Shipping details">
Free 2-day shipping on orders over $50. Delivery in 3 to 5 business days otherwise.
</Collapsible>
Closed by default; pass defaultOpen to start open. Open state is controlled (open + onOpenChange) or uncontrolled (defaultOpen). A description adds a muted secondary line under the title; card wraps the disclosure in an outlined card surface on web and Android (on iOS the default look already is the inset-grouped card, so card is a no-op there). For a set of related, peer sections, reach for an Accordion (a group of these); Collapsible is the standalone primitive.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--tx2
--tx3

Related components