Table of Contents
Stepper
A Stepper guides users through steps of a task in sequential order.
Used for this
- 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
- Name8.42.0•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
Stepper
Extends OlHTMLAttributes<HTMLOListElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
activeIndex | number | – | Defines the currently active step, starting at 0 |
isHorizontal | boolean | – | Applies horizontal layout styling |
Stepper.Content
Extends HTMLAttributes<HTMLDivElement>
Stepper.Label
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | – | Replaces the label number with an icon |
isHidden | boolean | – | Hides the label text |
Stepper.Step
Extends LiHTMLAttributes<HTMLLIElement>