Accordion
Accordions are headers that can be expanded to reveal content or collapsed to hide it.
- To organize related information into sections
- To surface information through progressive disclosure
- To guide users through a process use a Stepper instead
How to use it
Default
By default, the accordion can open or collapse one section at a time.
Bare
Section borders are removed using isBare.
Expandable
Multiple sections can be open or closed at the same time using isExpandable.
Size
An accordion can be default or compact.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-accordions
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Accordion } from '@zendeskgarden/react-accordions'
API
The Accordion component follows this structure:
<Accordion><Accordion.Section><Accordion.Header><Accordion.Label /></Accordion.Header><Accordion.Panel /></Accordion.Section>{/* other sections */}</Accordion>
Accordion
Extends HTMLAttributes<HTMLDivElement>
The Accordion component provides state and accessibility attributes to its children. It follows the W3C Accordion pattern.
| Prop name | Type | Default | Description |
|---|---|---|---|
defaultExpandedSections | any[] | Sets the default expanded sections in an uncontrolled accordion | |
expandedSections | any[] | Sets the expanded sections in a controlled accordion | |
isAnimated | boolean | true | Animates section expansion and collapse |
isBare | boolean | Hides section borders | |
isCollapsible | boolean | true | Allows uncontrolled accordion sections to collapse |
isCompact | boolean | Applies compact styling | |
isExpandable | boolean | Enables simultaneous expansion of uncontrolled accordion sections | |
level | number | Required | Sets aria-level heading rank in the document structure |
onChange | Handles accordion expansion changes Parameters value A section value |
Accordion.Header
Extends HTMLAttributes<HTMLDivElement>
A Header acts as the trigger for the corresponding Panel to be expanded or collapsed. It renders an icon to show the current expansion state. Nest it within a Section component.
Accordion.Label
Extends ButtonHTMLAttributes<HTMLButtonElement>
Nest the Label within a Header component.
Accordion.Panel
Extends HTMLAttributes<HTMLElement>
Nest a Panel within a Section component.
Accordion.Section
Extends HTMLAttributes<HTMLElement>
Wrap each section’s Header and corresponding Panel together with the Section component.