Collapsible

A single disclosure: one header (its title, or a custom trigger, plus a chevron that rotates when open) over one collapsible content panel.
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.
iOS
Android
Web
tsx
<Collapsible title="Shipping details">
Free 2-day shipping on orders over $50. Delivery in 3 to 5 business days otherwise.
</Collapsible>

Props

Prop
Description
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
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.
children
required
ReactNode
The collapsible content. A string renders in the skin's content type; a ReactNode renders as-is.
open
boolean
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
Initial open state for the uncontrolled case (read once, default false).
disabled
boolean
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.

Do & Don’t

One block of detail

Don’t
Don't reach for a Collapsible when you have several related, peer sections; that is an Accordion's job, and a stack of standalone disclosures loses the single-open coordination.
Do
Use one Collapsible to hide a single block of secondary detail behind a clear label, and let the chevron carry the open/closed affordance.
← CodeBlock
DescriptionList →