To disable step selection, set
allowStepSelect prop on
It can be used to prevent the user from reaching next steps while letting them go back and forth between steps they've already reached before:
Another way to disable selection of upcoming steps is to use the
allowNextStepsSelect directly on the
This is useful when you don't need to control the behavior specifically for each step.
Component size is controlled by two props:
size prop controls icon size, label and description font size.
iconSize allows to overwrite icon size separately from other size values:
You can replace the step icon by setting
icon prop on
To change completed check icon set
You can use any React node as an icon: component, string, number:
You can use
Stepper with icons only. Note that in this case, you will have to
Stepper.Step component to make it accessible:
You can also change the completed icon for each step, for example, to indicate error state:
To change step icon and body arrangement, set
To indicate loading state set
loading prop on Step component,
Loader will replace step icon.
You can configure the default loader in the theme.
Component Styles API
Hover over selectors to highlight corresponding elements
Examples of styles customization with Styles API:
You can get refs of step button and stepper root element (div):
Stepper component relies on
Stepper.Step order. Wrapping
Stepper.Step is not supported,
Instead you will need to use different approaches:
<Stepper.Step /> components render button element, set
to make component visible for screen readers in case you do not specify