06/10/2022, 09:53 React Stepper component - Material UI

Edit this page

Stepper
Steppers convey progress through numbered steps. It provides a wizard-like
workflow.

For Figma. A large UI kit with over 600 handcrafted MUI components
🎨 .
ad by MUI

Steppers display progress through a sequence of logical and numbered steps. They may also be
used for navigation.
Steppers may display a transient feedback message after a step is saved.

Types of Steps: Editable, Non-editable, Mobile, Optional

Types of Steppers: Horizontal, Vertical, Linear, Non-linear

Feedback Bundle size Material Design Figma Adobe Sketch

Note: Steppers are no longer documented in the Material Design guidelines, but Material
UI will continue to support them.

Horizontal stepper
Horizontal steppers are ideal when the contents of one step depend on an earlier step.

Avoid using long step names in horizontal steppers.

Linear
A linear stepper allows the user to complete the steps in sequence.

The Stepper can be controlled by passing the current step index (zero-based) as the
activeStep prop. Stepper orientation is set using the orientation prop.

https://mui.com/material-ui/react-stepper/ 1/6
06/10/2022, 09:53 React Stepper component - Material UI

This example also shows the use of an optional step by placing the optional prop on the
second Step component. Note that it's up to you to manage when an optional step is skipped.
Once you've determined this for a particular step you must set completed={false} to signify
that even though the active step index has gone beyond the optional step, it's not actually
complete.

Create an ad group
1 Select campaign settings 2 3 Create an ad
Optional

Step 1

BACK NEXT

Non-linear
Non-linear steppers allow the user to enter a multi-step flow at any point.

This example is similar to the regular horizontal stepper, except steps are no longer
automatically set to disabled={true} based on the activeStep prop.

The use of the StepButton here demonstrates clickable step labels, as well as setting the
completed
flag. However because steps can be accessed in a non-linear fashion, it's up to your
own implementation to
determine when all steps are completed (or even if they need to be
completed).

1 Select campaign settings 2 Create an ad group 3 Create an ad

Step 1

BACK NEXT COMPLETE STEP

Alternative label
Labels can be placed below the step icon by setting the alternativeLabel prop on the
Stepper component.

2 3

Select master blaster campaign Create an ad group Create an ad

settings

https://mui.com/material-ui/react-stepper/ 2/6
06/10/2022, 09:53 React Stepper component - Material UI

<Stepper activeStep={1} alternativeLabel>

{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>

Error step

Create an ad group
Select campaign settings 3 Create an ad
Alert message

Customized horizontal stepper

Here is an example of customizing the component.
You can learn more about this in the
overrides documentation page.

Select campaign settings Create an ad group Create an ad

Select campaign settings Create an ad group Create an ad

<Stepper alternativeLabel activeStep={1} connector={<QontoConnector />}>

{steps.map((label) => (
<Step key={label}>
<StepLabel StepIconComponent={QontoStepIcon}>{label}</StepLabel>
</Step>
))}
</Stepper>
<Stepper alternativeLabel activeStep={1} connector={<ColorlibConnector />}>
{steps.map((label) => (
<Step key={label}>
<StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
</Step>
))}
</Stepper>

https://mui.com/material-ui/react-stepper/ 3/6
06/10/2022, 09:53 React Stepper component - Material UI

Vertical stepper
Vertical steppers are designed for narrow screen sizes. They are ideal for mobile. All the
features of the horizontal stepper can be implemented.

1 Select campaign settings

For each ad campaign that you create, you can

control how much
you're willing to spend on
clicks and conversions, which networks
and
geographical locations you want your ads to
show on, and more.

CONTINUE BACK

2 Create an ad group

Create an ad
3
Last step

Performance
The content of a step is unmounted when closed.
If you need to make the content available to
search engines or render expensive component trees inside your modal while optimizing for
interaction responsiveness it might be a good idea to keep the step mounted with:

<StepContent TransitionProps={{ unmountOnExit: false }} />

Mobile stepper
This component implements a compact stepper suitable for a mobile device. It has more
limited functionality than the vertical stepper. See mobile steps for its inspiration.

The mobile stepper supports three variants to display progress through the available steps:
text, dots, and progress.

Text

https://mui.com/material-ui/react-stepper/ 4/6
06/10/2022, 09:53 React Stepper component - Material UI

The current step and total number of steps are displayed as text.

Select campaign settings

For each ad campaign that you create, you can

control how much
you're willing to spend on clicks
and conversions, which networks
and geographical
locations you want your ads to show on, and more.

BACK 1/3 NEXT

Text with carousel effect

This demo uses
react-swipeable-views to create a carousel.

Bird

BACK NEXT

Dots
Use dots when the number of steps is small.

https://mui.com/material-ui/react-stepper/ 5/6
06/10/2022, 09:53 React Stepper component - Material UI

BACK NEXT

Progress
Use a progress bar when there are many steps, or if there are steps that need to be inserted
during the process (based on responses to earlier steps).

BACK NEXT

API
<MobileStepper />
<Step />
<StepButton />
<StepConnector />
<StepContent />
<StepIcon />
<StepLabel />
<Stepper />

Speed dial Tabs

Was this page helpful?

https://mui.com/material-ui/react-stepper/ 6/6