Accordion
An accordion is a vertically stacked set of interactive headings that hide or reveal associated content panels.
Import
import { Accordion } from "@cfa/react-core";Live Editor
Guidelines
When to use
- Accordion is for optional or secondary content people can skip.
Do
- Write headers people can scan. For FAQ-style lists, write each as the question people would ask.
- Collapse every section on load. Open one on load only when people usually need that content first, like the settings group they edit most.
- Let FAQ-style lists keep more than one section open. Allow only one open at a time for settings-style sections.
Avoid
- Hiding anything critical behind a click. If people need to read every word, put it on the page.
- Adding so many sections that the list gets hard to scan.
Examples
Default
The basic accordion allows one panel to be open at a time.
Individual
You can also render an individual Accordion.Item outside of a group.
Multiple Expanded
Use allowsMultipleExpanded to enable multiple panels to be opened simultaneously.
Default Expanded
Use defaultExpandedKeys to specify which items should be expanded when the accordion first renders.
Elevated Items
Use the isElevated prop to give each accordion item a raised appearance.
Within Surface
The Accordion can be placed within a Surface component for additional styling.
Disabled
The entire accordion can be disabled using the isDisabled prop.
Visit the Documentation Site for the full list of props.