Stepper
Usage
Allow step select
To disable step selection set allowStepSelect
prop on Stepper.Step
component.
It can be used to prevent user from reaching next steps while letting them go back and forth between steps they've already reached before:
Disable next steps selection
Another way to disable selection of upcoming steps is to use the allowNextStepsSelect
directly on the Stepper
component.
This is useful when you don't need to control the behavior specifically for each step.
Color, radius and size
You can use any color from theme.colors
, by default Stepper will use theme.primaryColor
:
Component size is controlled by two props: size
and iconSize
.
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
set aria-label
or title
on Step component to make it accessible:
You can also change completed icon for each step, for example, to indicate error state:
Step-aware components for customization
All props accepting a React Node for customizing a step (label
, icon
, completedIcon
...) can also take a React Component
instead, which will receive the step's index as props.
This allows easily using a custom component for each steps.
Vertical orientation
Responsive styles
To change orientation based on viewport size set breakpoint
prop.
In following example stepper will have horizontal orientation when viewport width is more
than theme.breakpoints.md
:
You can configure breakpoints with MantineProvider or use number to set breakpoint in px:
Icon position
To change step icon and body arrangement, set iconPosition
to right
,
this option is most useful for RTL:
Loading state
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):
Wrap Stepper.Step
Stepper
component relies on Stepper.Step
order. Wrapping Stepper.Step
is not supported,
Instead you will need to use different approaches:
Accessibility
<Stepper.Step />
components render button element, set aria-label
or title
props
to make component visible for screen readers in case you do not specify label
or description
:
Stepper component props
Name | Type | Description |
---|---|---|
active * | number | Active step index |
allowNextStepsSelect | boolean | Whether to enable click on upcoming steps by default. Defaults to true * |
breakpoint | number | "xs" | "sm" | "md" | "lg" | "xl" | Breakpoint at which orientation will change from horizontal to vertical |
children * | ReactNode | <Stepper.Step /> components only |
color | MantineColor | Active and progress Step colors from theme.colors |
completedIcon | ReactNode | StepFragmentComponent | Step icon displayed when step is completed |
contentPadding | number | "xs" | "sm" | "md" | "lg" | "xl" | Content padding-top from theme.spacing or number to set value in px |
icon | ReactNode | StepFragmentComponent | Step icon, defaults to step index + 1 when rendered within Stepper |
iconPosition | "left" | "right" | Icon position relative to step body |
iconSize | number | Step icon size in px |
onStepClick | (stepIndex: number) => void | Called when step is clicked |
orientation | "horizontal" | "vertical" | Component orientation |
progressIcon | ReactNode | StepFragmentComponent | Step icon displayed when step is in progress |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Radius from theme.radius, or number to set border-radius in px |
size | "xs" | "sm" | "md" | "lg" | "xl" | Component size |
Stepper.Step component props
Name | Type | Description |
---|---|---|
allowStepClick | boolean | Set to false to disable clicks on step |
allowStepSelect | boolean | Should step selection be allowed |
color | MantineColor | Step color from theme.colors |
completedIcon | ReactNode | StepFragmentComponent | Step icon displayed when step is completed |
description | ReactNode | StepFragmentComponent | Step description |
icon | ReactNode | StepFragmentComponent | Step icon, defaults to step index + 1 when rendered within Stepper |
iconPosition | "left" | "right" | Icon position relative to step body |
iconSize | number | Icon wrapper size in px |
label | ReactNode | StepFragmentComponent | Step label, render after icon |
loading | boolean | Indicates loading state on step |
orientation | "horizontal" | "vertical" | Component orientation |
progressIcon | ReactNode | StepFragmentComponent | Step icon displayed when step is in progress |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Radius from theme.radius, or number to set border-radius in px |
size | "xs" | "sm" | "md" | "lg" | "xl" | Component size |
state | "stepInactive" | "stepProgress" | "stepCompleted" | Step state, controlled by Steps component |
step | number | Step index, controlled by Steps component * |
withIcon | boolean | Should icon be displayed |
Stepper component Styles API
Name | Static selector | Description |
---|---|---|
root | .mantine-Stepper-root | Root element |
steps | .mantine-Stepper-steps | Steps controls wrapper |
separator | .mantine-Stepper-separator | Separator line between step controls |
verticalSeparator | .mantine-Stepper-verticalSeparator | Vertical separator line between step controls |
separatorActive | .mantine-Stepper-separatorActive | Separator active modifier |
verticalSeparatorActive | .mantine-Stepper-verticalSeparatorActive | Vertical separator active modifier |
content | .mantine-Stepper-content | Current step content wrapper |
stepWrapper | .mantine-Stepper-stepWrapper | Wrapper for the step icon and separator |
step | .mantine-Stepper-step | Step control button |
stepIcon | .mantine-Stepper-stepIcon | Step icon wrapper |
stepCompletedIcon | .mantine-Stepper-stepCompletedIcon | Completed step icon, rendered within stepIcon |
stepBody | .mantine-Stepper-stepBody | Contains stepLabel and stepDescription |
stepLabel | .mantine-Stepper-stepLabel | Step label |
stepDescription | .mantine-Stepper-stepDescription | Step description |
stepLoader | .mantine-Stepper-stepLoader | Step loader |