Skip to content
Edit this page

Steppers

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

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

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

Horizontal Stepper

Linear

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

This example also shows the use of an optional step by placing the optional property 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.

Select campaign settings
Create an ad groupOptional
Create an ad

Select campaign settings...

Linear - Alternative Label

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

Select master blaster campaign settings
Create an ad group
Create an ad

Select campaign settings...

Customized 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
Select campaign settings
Create an ad group
Create an ad

What is an ad group anyways?

Non-linear

Non-linear steppers allow users 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 property.

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).

Step 1: Select campaign settings...

Non Linear - Alternative Label

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

Step 1: Select campaign settings...

Non Linear - Error Step

Select campaign settings
Create an ad groupAlert message
Create an ad

Select campaign settings...

Vertical Stepper

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.

Create an ad group
Create an ad

Mobile Stepper

This component implements a compact stepper suitable for a mobile device. See mobile steps for its inspiration.

Text

This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.

San Francisco – Oakland Bay Bridge, United States

San Francisco – Oakland Bay Bridge, United States
1 / 5

Text with Carousel effect

This demo is very similar to the previous, the difference is the usage of react-swipeable-views to make the transition of steps.

San Francisco – Oakland Bay Bridge, United States

San Francisco – Oakland Bay Bridge, United States
1 / 5

Dots

Use dots when the number of steps isn’t large.

<MobileStepper
  variant="dots"
  steps={6}
  position="static"
  activeStep={activeStep}
  className={classes.root}
  nextButton={
    <Button size="small" onClick={handleNext} disabled={activeStep === 5}>
      Next
      {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
    </Button>
  }
  backButton={
    <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
      {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
      Back
    </Button>
  }
/>

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).

<MobileStepper
  variant="progress"
  steps={6}
  position="static"
  activeStep={activeStep}
  className={classes.root}
  nextButton={
    <Button size="small" onClick={handleNext} disabled={activeStep === 5}>
      Next
      {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
    </Button>
  }
  backButton={
    <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
      {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
      Back
    </Button>
  }
/>

API