REACT-NATIVES
WIRED FOR SPEED
react-natives v2.1.2
Theme
Light
Dark
Get Started
Menu
Components
Disclosure
Collapsible
A disclosure component that shows/hides content with a trigger.
Example
Preview
Code
Props
Collapsible Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes to apply to the collapsible container.
isOpen
boolean
—
Controlled open state of the collapsible.
onOpenChange
(open: boolean) => void
—
Callback invoked when the open state changes.
defaultOpen
boolean
false
The initial open state for uncontrolled usage.
CollapsibleTrigger Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the trigger element.
CollapsibleContent Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the collapsible content area.
Usage Guidelines
When to use
Use Collapsible for toggling visibility of a single section of content, like FAQ answers or expandable details.
Best practices
•
Use Collapsible for single expand/collapse sections — prefer Accordion for multiple related sections.
•
Include a visual indicator (chevron icon) in the trigger to signal expandability.
•
Animate the content height transition for a polished user experience.
Accessibility
CollapsibleTrigger sets aria-expanded to communicate state. CollapsibleContent is hidden from screen readers when collapsed.
Related Components
Accordion
A compound collapsible content component supporting single or multiple expanded items, with trigger, title, icon, and content sub-components.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.