Skip to main content
npm install @zendeskgarden/react-accordions
npm install react react-dom styled-components @zendeskgarden/react-theming

​
Accordion

The Accordion component collapses and expands content sections. It manages focus, keyboard navigation, and ARIA attributes automatically. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Accordion } from '@zendeskgarden/react-accordions';

<ThemeProvider>
  <Accordion level={3}>
    <Accordion.Section>
      <Accordion.Header>
        <Accordion.Label>Section one</Accordion.Label>
      </Accordion.Header>
      <Accordion.Panel>Content for section one.</Accordion.Panel>
    </Accordion.Section>
    <Accordion.Section>
      <Accordion.Header>
        <Accordion.Label>Section two</Accordion.Label>
      </Accordion.Header>
      <Accordion.Panel>Content for section two.</Accordion.Panel>
    </Accordion.Section>
  </Accordion>
</ThemeProvider>

​
Accordion props

​
level
1 | 2 | 3 | 4 | 5 | 6
required
Sets the aria-level heading rank for accordion headers in the document outline.
​
expandedSections
any[]
Controls which sections are expanded (controlled mode). Pass an array of section indices.
​
defaultExpandedSections
any[]
Sets initially expanded sections in uncontrolled mode.
​
onChange
(value: any) => void
Callback fired when a section is expanded or collapsed.
​
isBare
boolean
Hides section borders for a minimal appearance.
​
isCollapsible
boolean
default:"true"
Allows the currently expanded section to be collapsed by clicking it again.
​
isCompact
boolean
Applies compact padding to section headers and panels.
​
isAnimated
boolean
default:"true"
Animates section expansion and collapse.
​
isExpandable
boolean
Allows multiple sections to be open simultaneously (uncontrolled mode).

​
Controlled accordion

import { useState } from 'react';
import { Accordion } from '@zendeskgarden/react-accordions';

const ControlledAccordion = () => {
  const [expanded, setExpanded] = useState([0]);

  return (
    <Accordion level={3} expandedSections={expanded} onChange={setExpanded}>
      <Accordion.Section>
        <Accordion.Header><Accordion.Label>First</Accordion.Label></Accordion.Header>
        <Accordion.Panel>First panel content.</Accordion.Panel>
      </Accordion.Section>
      <Accordion.Section>
        <Accordion.Header><Accordion.Label>Second</Accordion.Label></Accordion.Header>
        <Accordion.Panel>Second panel content.</Accordion.Panel>
      </Accordion.Section>
    </Accordion>
  );
};

​
Stepper

The Stepper component displays a sequence of steps, useful for multi-step forms and onboarding flows. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Stepper } from '@zendeskgarden/react-accordions';

<ThemeProvider>
  <Stepper>
    <Stepper.Step>
      <Stepper.Label>Account setup</Stepper.Label>
      <Stepper.Content>Enter your name and email address.</Stepper.Content>
    </Stepper.Step>
    <Stepper.Step>
      <Stepper.Label>Configure preferences</Stepper.Label>
      <Stepper.Content>Choose your notification and display settings.</Stepper.Content>
    </Stepper.Step>
    <Stepper.Step>
      <Stepper.Label>Review and confirm</Stepper.Label>
      <Stepper.Content>Review your choices before finishing.</Stepper.Content>
    </Stepper.Step>
  </Stepper>
</ThemeProvider>
Stepper renders step indicators with connecting lines automatically. Use activeIndex on Stepper to control which step is active.

Build docs developers (and LLMs) love

Get started for freeTalk to us