Skip to content
Influence Joy UI's 2024 roadmap! Participate in the latest Developer Survey
+

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.

  1. First

  2. 2

    Second

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

Playground

Basics

import Stepper from '@mui/joy/Stepper';
import Step from '@mui/joy/Step';
  1. Step 1
  2. Step 2
  3. Step 3
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. 1
    Order placed
  2. 2
    In review
  3. 3
    Approved
Press Enter to start editing

Indicator at the top

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

  1. 1
    Order placed
  2. 2
    In review
  3. 3
    Approved

Button

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

  2. 2
  3. 3

Sizes

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

  1. 1
    Order placed
  2. 2
    In review
  3. 3
    Approved
  1. 1
    Order placed
  2. 2
    In review
  3. 3
    Approved
  1. 1
    Order placed
  2. 2
    In review
  3. 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. 1
    Order placed
  2. 2
    In review
  3. 3
    Approved
  1. Order placed
  2. In review
  3. 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. 1

    Billing Address

    Ron Swanson
    14 Lakeshore Drive
    Pawnee, IN 12345
    United States
    T: 555-555-5555

    Next
    Edit
  2. 2

    Shipping Address

    Pending
  3. 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.

  1. Order placed
  2. In review
  3. Approved

CSS Variables

  1. 1
    Order placed
  2. 2
    Order shipped
  1. Order placed
  2. In review
  3. Approved
  1. 1
    Order placed
  2. 2
    In review
  3. 3
    Approved
<Stepper>

CSS variables

px
px
px
px

Common examples

Company registration

  1. Step 1

    Basic Details

  2. Step 2

    Company Details

  3. Step 3

    Subscription plan
  4. 3

    Step 4

    Payment details

Dotted connector

  1. 01Preliminary

  2. 02Your details

  3. 03KYC

  4. 04KYC

Icon stepper

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