[component]

Dev Mode
Accordion
Description
Accordion is a container that can be expanded and collapsed to show content about a single subject. Its contents can be visible at all items, or expand and collapse as an individual item or a group of items. Also called “drawer”, “collapsed section”, “expandable section”, or “dropdown section”.
Accordion Title 1
Some children content
Accordion Title 2
Some more children content
Usage Guidelines
Do
Use accordions to group and organize content to keep the page clean and digestible.
Use them to isplay additional related content about a particular subject.
Enable users to reveal or hide additional content as necessary.
Don't
Obscure important information
Use an accordion when the content is crucial to read in full
Add too much content to the accordion (for example, multiple pages worth of information in one collapsed section)
Use an accordion when there is insufficient content to condense
Props
Name
Type
Required
Description
children
ReactNode
Required
The content to be displayed inside the accordion.
title
string
Required
The title of the accordion.
includeInfoModal
boolean
If true, an information modal will be included.
infoModalChildren
ReactElement
The content of the information modal.
infoModalSubtitle
string
The subtitle of the information modal.
infoModalText
string
The text content of the information modal.
infoModalTitle
string
The title of the information modal.
isCollapsed
boolean
If true, the accordion will be collapsed.
onToggle
* Callback fired when the accordion is toggled.
subtitle
string
testID
string
Root test id for the primary interactive element or container.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
NN/g article
Examples
Accordion Demo
Accordion Title
ⓘ
Some children content
Some more children content
Accordion OnToggle Demo
Sm Title
Custom Width setting set by onToggle Callback
Allows dynamic width adjustment