Stepper API

API documentation for the React Stepper component. Learn about the available props and the CSS API.

Import

import Stepper from '@mui/material/Stepper';
// or
import { Stepper } from '@mui/material';

The name MuiStepper can be used when providing default props or style overrides in the theme.

Props of the native component are also available.

Name	Type	Default	Description
activeStep	integer	0	Set the active step (zero based index). Set to -1 to disable all the steps.
alternativeLabel	bool	false	If set to 'true' and orientation is horizontal, then the step label will be positioned under the icon.
children	node		Two or more `<Step />` components.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
connector	element	<StepConnector />	An element to be placed between each step.
nonLinear	bool	false	If set the `Stepper` will not assist in controlling steps for linear flow.
orientation	'horizontal' \| 'vertical'	'horizontal'	The component orientation (layout flow direction).
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.

The ref is forwarded to the root element.

Rule name	Global class	Description
root	.MuiStepper-root	Styles applied to the root element.
horizontal	.MuiStepper-horizontal	Styles applied to the root element if `orientation="horizontal"`.
vertical	.MuiStepper-vertical	Styles applied to the root element if `orientation="vertical"`.
alternativeLabel	.MuiStepper-alternativeLabel	Styles applied to the root element if `alternativeLabel={true}`.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.