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
- Name8.76.4•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.