Accordion Preview

An accordion groups sections of related content that can be opened and closed.

Accordions decrease cognitive load by letting people choose which sections of content they see, like questions in an FAQ. Never put information that's required for the current task inside an accordion. Consider a treatment that gives it more prominence.

Loading...
Open in CodeSandbox
Accordion storybook
React guidance
Accordion pattern
WAI guidance

Properties

as

“div”
Default:
none

collapsible

Indicates if Accordion support multiple Panels closed at the same time.

boolean
Default:
none

defaultOpenItems

Default value for the uncontrolled state of the panel.

unknown
Default:
none

multiple

Indicates if Accordion support multiple Panels opened at the same time.

boolean
Default:
none

Indicates if keyboard navigation is available and gives two options, linear or circular navigation.

“linear” “circular”
Default:
none

onToggle

Callback to be called when the opened items change.

AccordionToggleEventHandler
Default:
none

openItems

Controls the state of the panel.

unknown
Default:
none