Stepper
A Stepper guides users through steps of a task in sequential order.
- For multi-step flows that must be completed in order
How to use it
Default
The default usage of a Stepper component.
Layout
A Stepper is vertical by default but can be horizontal using isHorizontal.
Icons
Label numbers can be replaced with icons.
Configuration
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-accordions
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Stepper } from '@zendeskgarden/react-accordions'
API
The Stepper component follows this structure:
<Stepper><Stepper.Step><Stepper.Label /><Stepper.Content /></Stepper.Step>{/* other steps */}</Stepper>
Stepper orientation
- Define the content for a vertical stepper using the
Stepper.Contentfor each step - Render the content for a horizontal stepper externally. See layout example for details.
Stepper
Extends OlHTMLAttributes<HTMLOListElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
activeIndex | number | 0 | Defines the currently active step, starting at 0 |
isHorizontal | boolean | Applies horizontal layout styling |
Stepper.Content
Extends HTMLAttributes<HTMLDivElement>
Nest the Content within a Step component.
Stepper.Label
Extends HTMLAttributes<HTMLDivElement>
The Label component renders the provided label text with the step number or the provided icon. Nest it within a Step.
| Prop name | Type | Default | Description |
|---|---|---|---|
icon | ReactElement<any, string | JSXElementConstructor<any>> | Replaces the label number with an icon | |
iconProps | SVGAttributes<SVGElement> | Passes props to the default check icon | |
isHidden | boolean | Hides the label text |
Stepper.Step
Extends LiHTMLAttributes<HTMLLIElement>
Wrap each step’s Label and corresponding Content together with the Step component.