Allow step select
To disable step selection set
allowStepSelect prop on
It can be used to prevent user from reaching next steps:
Color, radius and size
You can use any color from
theme.colors, by default Stepper will use
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:
With custom icons
You can replace step icon by setting
icon prop on Step component.
To change completed check icon set
completedIcon on Stepper component.
You can use any React node as icon: component, string, number:
You can use Stepper with icons only. Note that in this case you will have to
title on Step component to make it accessible:
You can also change completed icon for each step, for example, to indicate error state:
To change orientation based on viewport size set
In following example stepper will have horizontal orientation when viewport width is more
You can configure breakpoints in MantineProvider or use number to set breakpoint in px:
To change step icon and body arrangement set
this option is most useful for RTL:
To indicate loading state set
loading prop on Step component,
Loader will replace step icon. You can configure default loader in MantineProvider.
Customize with Styles API
You can change Stepper styles using Styles API
Get step ref
You can get refs of step button and stepper root element (div):
<Stepper.Step /> components render button element, set
to make component visible for screen readers in case you do not specify