Accordion

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”.

Package: @terreno/ui
Categories: Component
Props interface: AccordionProps
Story source: demo/stories/Accordion.stories.tsx

Live demo

Live preview from the Terreno component demoOpen in playground ↗

Props

Prop	Type	Required	Description
children	ReactNode	Yes	The content to be displayed inside the accordion.
title	string	Yes	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	reflection		* Callback fired when the accordion is toggled.
subtitle	string
testID	string		Root test id for the primary interactive element or container.