Table of Contents
Accordion
Accordions are headers that can be expanded to reveal content or collapsed to hide it.
Used for this
- To organize related information into sections
- To surface information through progressive disclosure
Not for this
- 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.42.0•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
Accordion
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
expandedSections | number[] | undefined | 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 | () => undefined | Handles accordion expansion changes Parameters index A section index |
Accordion.Header
Extends HTMLAttributes<HTMLDivElement>
Accordion.Label
Extends ButtonHTMLAttributes<HTMLButtonElement>
Accordion.Panel
Extends HTMLAttributes<HTMLElement>
Accordion.Section
Extends HTMLAttributes<HTMLDivElement>