REACT-NATIVES
WIRED FOR SPEED
react-natives v2.1.2
Theme
Light
Dark
Get Started
Menu
Components
Navigation
Accordion
A compound collapsible content component supporting single or multiple expanded items, with trigger, title, icon, and content sub-components.
Example
Preview
Code
Props
Accordion Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the accordion container.
type
'single' | 'multiple'
'single'
Whether one or multiple items can be expanded at once.
defaultValue
string[]
—
The initial expanded item values when uncontrolled.
value
string[]
—
The controlled expanded item values.
onValueChange
(value: string[]) => void
—
Callback invoked when the expanded items change.
isCollapsible
boolean
true
Whether the last remaining expanded item can be collapsed.
variant
'filled' | 'unfilled'
'filled'
The visual variant of the accordion.
size
'sm' | 'md' | 'lg'
'md'
Controls the padding and font size of the accordion.
AccordionItem Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the accordion item.
value *
string
—
Unique identifier for the accordion item.
AccordionTrigger Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the accordion trigger button.
AccordionTitleText Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the accordion title text.
AccordionIcon Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the accordion expand/collapse icon.
AccordionContent Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the accordion collapsible content.
Usage Guidelines
When to use
Use Accordion to show and hide sections of content, such as FAQs or collapsible settings groups.
Best practices
•
Use single type for FAQs where one answer at a time is typical.
•
Use multiple type when users need to compare sections.
•
Include AccordionIcon to indicate expand/collapse state.
Accessibility
Accordion implements the WAI-ARIA accordion pattern. Trigger buttons are keyboard accessible with proper expanded state.
Related Components
Tabs
A compound tabbed interface component with tab list, individual tabs, and content panels for organizing content into switchable views.
Card
A compound container component with header, body, and footer sections for grouping related content.
Divider
A visual separator that divides content into distinct sections, supporting horizontal and vertical orientations.
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.