Steppers

Steppers convey progress through numbered steps.

Steppers are a visual representation of a sequence or flow for user inputs. They provide a wizard like workflow.

Steppers are appropriate when there are more than two steps in a process. For a process of more than five steps, other navigation options should be explored.

Basic Stepper

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

function BasicStepper() {
  const [activeStep, updateActiveStep] = React.useState(0);
  const finalIndex = 2;

  function handleNext() {
    updateActiveStep((prevActiveStep) => prevActiveStep + 1);
  }

  function handleBack() {
    updateActiveStep((prevActiveStep) => prevActiveStep - 1);
  }

  return (
    <>
      <Stepper activeStep={activeStep}>
        <Step>
          <StepLabel>Details</StepLabel>
        </Step>
        <Step>
          <StepLabel>Options</StepLabel>
        </Step>
        <Step>
          <StepLabel>Sign Up</StepLabel>
        </Step>
      </Stepper>
      <Grid container>
        {activeStep > 0 && activeStep <= finalIndex && (
          <Button
            margin={{ top: 3, right: 2 }}
            onClick={handleBack}
            variant="text"
            color="neutral"
          >
            Back
          </Button>
        )}
        {activeStep < finalIndex && (
          <Button margin={{ top: 3, left: "auto" }} onClick={handleNext}>
            Next
          </Button>
        )}
      </Grid>
    </>
  );
}

function BasicStepper() {
  const [activeStep, updateActiveStep] = React.useState(0);
  const finalIndex = 2;

  function handleNext() {
    updateActiveStep((prevActiveStep) => prevActiveStep + 1);
  }

  function handleBack() {
    updateActiveStep((prevActiveStep) => prevActiveStep - 1);
  }

  return (
    <>
      <Stepper activeStep={activeStep}>
        <Step>
          <StepLabel>Details</StepLabel>
        </Step>
        <Step>
          <StepLabel>Options</StepLabel>
        </Step>
        <Step>
          <StepLabel>Sign Up</StepLabel>
        </Step>
      </Stepper>
      <Grid container>
        {activeStep > 0 && activeStep <= finalIndex && (
          <Button
            margin={{ top: 3, right: 2 }}
            onClick={handleBack}
            variant="text"
            color="neutral"
          >
            Back
          </Button>
        )}
        {activeStep < finalIndex && (
          <Button margin={{ top: 3, left: "auto" }} onClick={handleNext}>
            Next
          </Button>
        )}
      </Grid>
    </>
  );
}

Label Positions

Labels may be positioned with the labelLocation prop at the default of right or alternatively to the top or bottom. Steppers with longer labels or greater than 3 steps should choose top or bottom alignment.

function PositionedLabels() {
  const [activeStep, updateActiveStep] = React.useState(0);
  const finalIndex = 2;

  function handleNext() {
    updateActiveStep((prevActiveStep) => prevActiveStep + 1);
  }

  function handleBack() {
    updateActiveStep((prevActiveStep) => prevActiveStep - 1);
  }

  return (
    <>
      <Grid container spacing={6}>
        <Grid item xs={12}>
          <Stepper activeStep={activeStep} labelLocation="top">
            <Step>
              <StepLabel>Details</StepLabel>
            </Step>
            <Step>
              <StepLabel>Options</StepLabel>
            </Step>
            <Step>
              <StepLabel>Sign Up</StepLabel>
            </Step>
          </Stepper>
        </Grid>
        <Grid item xs={12}>
          <Stepper activeStep={activeStep} labelLocation="bottom">
            <Step>
              <StepLabel>Details</StepLabel>
            </Step>
            <Step>
              <StepLabel>Options</StepLabel>
            </Step>
            <Step>
              <StepLabel>Sign Up</StepLabel>
            </Step>
          </Stepper>
        </Grid>
        <Grid item container xs={12}>
          {activeStep > 0 && activeStep <= finalIndex && (
            <Button
              margin={{ top: 3, right: 2 }}
              onClick={handleBack}
              variant="text"
              color="neutral"
            >
              Back
            </Button>
          )}
          {activeStep < finalIndex && (
            <Button margin={{ top: 3, left: "auto" }} onClick={handleNext}>
              Next
            </Button>
          )}
        </Grid>
      </Grid>
    </>
  );
}

function PositionedLabels() {
  const [activeStep, updateActiveStep] = React.useState(0);
  const finalIndex = 2;

  function handleNext() {
    updateActiveStep((prevActiveStep) => prevActiveStep + 1);
  }

  function handleBack() {
    updateActiveStep((prevActiveStep) => prevActiveStep - 1);
  }

  return (
    <>
      <Grid container spacing={6}>
        <Grid item xs={12}>
          <Stepper activeStep={activeStep} labelLocation="top">
            <Step>
              <StepLabel>Details</StepLabel>
            </Step>
            <Step>
              <StepLabel>Options</StepLabel>
            </Step>
            <Step>
              <StepLabel>Sign Up</StepLabel>
            </Step>
          </Stepper>
        </Grid>
        <Grid item xs={12}>
          <Stepper activeStep={activeStep} labelLocation="bottom">
            <Step>
              <StepLabel>Details</StepLabel>
            </Step>
            <Step>
              <StepLabel>Options</StepLabel>
            </Step>
            <Step>
              <StepLabel>Sign Up</StepLabel>
            </Step>
          </Stepper>
        </Grid>
        <Grid item container xs={12}>
          {activeStep > 0 && activeStep <= finalIndex && (
            <Button
              margin={{ top: 3, right: 2 }}
              onClick={handleBack}
              variant="text"
              color="neutral"
            >
              Back
            </Button>
          )}
          {activeStep < finalIndex && (
            <Button margin={{ top: 3, left: "auto" }} onClick={handleNext}>
              Next
            </Button>
          )}
        </Grid>
      </Grid>
    </>
  );
}

Mobile View

Provide a truncated view for mobile devices by including the truncate prop. Reduce screen width to preview.

function MobileStepper() {
  const [activeStep, updateActiveStep] = React.useState(0);
  const finalIndex = 3;

  function handleNext() {    
    updateActiveStep((prevActiveStep) => prevActiveStep + 1);
  }
  
  function handleBack() {    
    updateActiveStep((prevActiveStep) => prevActiveStep - 1);
  } 

  return (
    <>
      <Stepper activeStep={activeStep} truncate>
        <Step>
          <StepLabel>Details</StepLabel>
        </Step>
        <Step>
          <StepLabel>Options</StepLabel>
        </Step>
        <Step>
          <StepLabel>Sign Up</StepLabel>
        </Step>
        <Step>
          <StepLabel>Finish</StepLabel>
        </Step>
      </Stepper>
      <Grid container>
        {activeStep > 0 && activeStep <= finalIndex && (
          <Button
            margin={{ top: 3, right: 2 }}
            onClick={handleBack}
            variant="text"
            color="neutral"
          >
            Back
          </Button>
        )}
        {activeStep < finalIndex && (
          <Button margin={{ top: 3, left: "auto" }} onClick={handleNext}>
            Next
          </Button>
        )}
      </Grid>
    </>
  );
}

function MobileStepper() {
  const [activeStep, updateActiveStep] = React.useState(0);
  const finalIndex = 3;

  function handleNext() {    
    updateActiveStep((prevActiveStep) => prevActiveStep + 1);
  }
  
  function handleBack() {    
    updateActiveStep((prevActiveStep) => prevActiveStep - 1);
  } 

  return (
    <>
      <Stepper activeStep={activeStep} truncate>
        <Step>
          <StepLabel>Details</StepLabel>
        </Step>
        <Step>
          <StepLabel>Options</StepLabel>
        </Step>
        <Step>
          <StepLabel>Sign Up</StepLabel>
        </Step>
        <Step>
          <StepLabel>Finish</StepLabel>
        </Step>
      </Stepper>
      <Grid container>
        {activeStep > 0 && activeStep <= finalIndex && (
          <Button
            margin={{ top: 3, right: 2 }}
            onClick={handleBack}
            variant="text"
            color="neutral"
          >
            Back
          </Button>
        )}
        {activeStep < finalIndex && (
          <Button margin={{ top: 3, left: "auto" }} onClick={handleNext}>
            Next
          </Button>
        )}
      </Grid>
    </>
  );
}

Steppers

Basic Stepper

Label Positions

Mobile View

Properties

<Stepper />

<Step />

<StepLabel />