Stepper

Shows the steps of a flow and which one the user is on, like a checkout or a signup. The steps before active are completed.

General

Pass the index of the current step in active and name the list with aria-label.

Clickable steps

With onStepClick, each step is a button that receives its index. A step with disabled cannot be clicked.

Error

Mark a step that failed with error. It shows in red whether it is done or not.

Vertical

Use orientation="vertical" for narrow spaces or long descriptions.

APIs

Stepper.Props

Attribute	Description	Type	Accepted values	Default
active	index of the current step, from `0`	`number`	-	-
onStepClick	called with the index of the clicked step; turns the steps into buttons	`(index: number) => void`	-	-
orientation	direction of the steps	`string`	`'horizontal', 'vertical'`	`horizontal`
...	native props, passed to the `ol`	`OlHTMLAttributes`	`'aria-label', 'id', ...`	-

Stepper.Step.Props

Attribute	Description	Type	Accepted values	Default
label	name of the step	`ReactNode`	-	-
description	text below the label	`ReactNode`	-	-
icon	replaces the number, the check and the error mark	`ReactNode`	-	-
error	the step failed	`boolean`	-	`false`
disabled	the step cannot be clicked, with `onStepClick`	`boolean`	-	`false`
...	native props, passed to the `li`	`LiHTMLAttributes`	-	-

Ref

The ref of Stepper points at the ol, and the ref of each step at its li.

The steps are an ordered list, so a screen reader hears how many there are and the position of each. Name the list with aria-label. The current step has aria-current="step", and completed and failed steps say so in text, not only in color. With onStepClick, each step is a real button, reached with Tab.

Edit this page on GitHub