Stepper

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

Introduction

Stepper displays progress through a sequence of logical and numbered steps. It support horizontal and vertical orientation for desktop and mobile viewports.

Joy UI Steppers are implemented using a collection of related components:

Stepper - a required container for steps. Renders as a <ol> by default.
Step - a step. Renders as a <li> by default.
StepIndicator - an optional indicator of a step.

First
2
Second

<Stepper>
  <Step
    indicator={
      <StepIndicator variant="solid" color="primary">
        <Check />
      </StepIndicator>
    }
  >First</Step>
  ...
</Stepper>

Basics

import Stepper from '@mui/joy/Stepper';
import Step from '@mui/joy/Step';

Step 1
Step 2
Step 3

<Stepper sx={{ width: '100%' }}>
  <Step>Step 1</Step>
  <Step>Step 2</Step>
  <Step>Step 3</Step>
</Stepper>

<Stepper sx={{ width: '100%' }}>
  <Step>Step 1</Step>
  <Step>Step 2</Step>
  <Step>Step 3</Step>
</Stepper>

Press Enter to start editing

Customization

Indicator

Pass StepIndicator as an element to Step's indicator prop to create number or icon indicators.

The StepIndicator supports Joy UI's four global variants: soft (default), solid, outlined, and plain.

1
Order placed
2
In review
3
Approved

<Stepper sx={{ width: '100%' }}>
  <Step
    indicator={
      <StepIndicator variant="solid" color="neutral">
        1
      </StepIndicator>
    }
  >
    Order placed
  </Step>
  <Step indicator={<StepIndicator variant="outlined">2</StepIndicator>}>
    In review
  </Step>
  <Step indicator={<StepIndicator>3</StepIndicator>}>Approved</Step>
</Stepper>

<Stepper sx={{ width: '100%' }}>
  <Step
    indicator={
      <StepIndicator variant="solid" color="neutral">
        1
      </StepIndicator>
    }
  >
    Order placed
  </Step>
  <Step indicator={<StepIndicator variant="outlined">2</StepIndicator>}>
    In review
  </Step>
  <Step indicator={<StepIndicator>3</StepIndicator>}>Approved</Step>
</Stepper>

Press Enter to start editing

Indicator at the top

Set Step's orientation="vertical" to show an indicator at the top.

1
Order placed
2
In review
3
Approved

Button

To make the Step clickable, renders the StepButton component as a direct child of the Step.

Sizes

The Stepper component comes in three sizes: sm, md (default), and lg.

1
Order placed
2
In review
3
Approved

1
Order placed
2
In review
3
Approved

1
Order placed
2
In review
3
Approved

Vertical

Use orientation="vertical" to display the Stepper vertically. If you don't provide an indicator prop to the Step, a dot (pseudo element) will be used as the indicator.

1
Order placed
2
In review
3
Approved

Order placed
In review
Approved

Extra content

For vertical Steppers, you can pass more content to the Step by grouping it inside an HTML element.

The Step switches its display to CSS grid when the Stepper's orientation is vertical.

1
Billing Address
Ron Swanson
14 Lakeshore Drive
Pawnee, IN 12345
United States
T: 555-555-5555
Next
Edit
2
Shipping Address
Pending
3
Shipping Method
Pending

Connector

The connector is a pseudo element of the Step. To customize it, target ::after element of the Step using sx prop.

Order placed
In review
Approved

CSS Variables

1
Order placed
2
Order shipped

Order placed
In review
Approved

1
Order placed
2
In review
3
Approved

<Stepper>

CSS variables

--Step-connectorThickness

--Step-connectorInset

--Step-connectorRadius

--Step-gap

--StepIndicator-size

Common examples

Company registration

Step 1
Basic Details
Step 2
Company Details
Step 3
Subscription plan
3
Step 4
Payment details

Dotted connector

01Preliminary
02Your details
03KYC
04KYC

Icon stepper

Payment and Billing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.