Stepper

Overview

Stepper is used to display the progress of a particular process through numbered steps to keep the user on track and increase the percentage of completeness.

When to use:

  • To guide users through a complex flow which needs multiple(3-5) steps.
  • When dealing with a complex process which can't be easily completed and benefits from dividing it into smaller distinct steps.

Implementation

Edit the code below to see your changes live!

function Example() {
  const steps = ['Connect your Account', 'Configure your Settings', 'Sync your Products'];
  const [currentStep, setCurrentStep] = useState(0);

  return (
    <>
      <Stepper currentStep={currentStep} steps={steps} />
      <Button disabled={currentStep === 0} onClick={() => setCurrentStep(0)}>
        Reset
      </Button>
      <Button
        disabled={currentStep === steps.length - 1}
        onClick={() => setCurrentStep(currentStep + 1)}
      >
        Next
      </Button>
    </>
  );
}

Props

Prop name
Type
Default
Description
steps *string[]

Titles for each segment of the Stepper.

currentStep *number

Sets which step is currently active. Starts at 0.

Props ending with * are required

Do's and Don'ts

Do
Should be placed directly below the page header at the top of the page and left aligned with the panel below.
Display the steps in order from left to right.
Only have a single step per page.
Aim for 3-5 steps, if a process requires more than 5 steps, consider simplifying the process or break it down into multi-tasks.
Use step labels to describe the purpose of the steps and recommend using short sentences of 2-3 words.
Strongly recommend content should only be saved/created at the end of flow and it should be explictly called out when it’s saved/created.
Each step needs be completed before proceeding to the next one.
Always allow the user to go back to the previous step.
Don't
Don’t use multiple Steppers on one page.
Don’t use long step labels.
Don’t add/modify number of steps dynamically. Number of steps shouldn't change mid-way through the flow due to what the user selected.