Stepper

Usage

Definition

The stepper illustrates a user’s progress through a series of steps to complete a process, and optionally, provides secondary navigation through the process. It provides the user with answers to these process questions: How many steps? Where am I now? What's next? and What's complete?

The stepper can be interactive, allowing a user to complete a process. In this case, use buttons for primary navigation, and the steps as secondary, direct navigation. A non-interactive stepper simply indicates status of a process.

An interactive stepper is most useful for a 2-7 step process. However, the number of steps should be as few as possible.

Common Characteristics

Individual steps in all steppers may be complete, valid vs. error, and required vs. optional.

Interactive Steppers

Interactive steppers should be used with buttons as primary navigation. Use a contained button for forward navigation, and a text or outlined button for backward navigation.

1. Step 1
2. Step 2
3. Step 3 Long Label
4. Step 4
5. Step 5

Step 1

Interactive stepper with primary and secondary navigation.

Small Screens

On small screens (XS breakpoint), only the current step label is displayed.

1. Step 1
2. Step 2
3. Step 3 Long Label
4. Step 4
5. Step 5

Step 1

Interactive stepper with primary and secondary navigation.

Non-interactive Steppers

1. Step 1
2. Step 2
3. Step 3 Long Label

Step 2

Design

States

Individual steps in all steppers may be complete, valid vs error, and required vs. optional.

Implementations

Code

Sizes

The Stepper comes in two different sizes. The largest of which is the default and is responsive. Starting at the smallest component size at the smallest screen width and then adjusting in size as the viewport changes in size.

Live Editor

<Stepper currentStep={1}> <Step complete>Pick Up Location</Step> <Step>Confirm</Step> </Stepper>

<Stepper currentStep={1}>
  <Step complete>Pick Up Location</Step>
  <Step>Confirm</Step>
</Stepper>

Result

Loading...

Small Size

Occasionally you need to lock a component to the smallest size. This is done with the size="sm" property.

Live Editor

<Stepper size="sm" currentStep={1}> <Step complete>Pick Up Location</Step> <Step>Confirm</Step> </Stepper>

<Stepper size="sm" currentStep={1}>
  <Step complete>Pick Up Location</Step>
  <Step>Confirm</Step>
</Stepper>

Result

Loading...

React Notation

The Stepper comes with a Step component available to inject steps with custom props directly into the Stepper component.

Minimal

When using the Step component, titles can be included either as a child of the Step component or as a title prop of the Step component.

Live Editor

<Stepper currentStep={1}> <Step>Pick Up Location</Step> <Step>Shipping Address</Step> <Step>Delivery Method</Step> <Step>Confirm</Step> </Stepper>

<Stepper currentStep={1}>
  <Step>Pick Up Location</Step>
  <Step>Shipping Address</Step>
  <Step>Delivery Method</Step>
  <Step>Confirm</Step>
</Stepper>

Result

Loading...

Expanded

This example aims to highlight how you specify which step is complete. By default, all steps are complete if they are before the currentStep index.

Live Editor

<Stepper currentStep={2}> <Step complete title="Pick Up Location" /> <Step complete title="Shipping Address" /> <Step title="Delivery Method" /> <Step title="Confirm" /> </Stepper>

<Stepper currentStep={2}>
  <Step complete title="Pick Up Location" />
  <Step complete title="Shipping Address" />
  <Step title="Delivery Method" />
  <Step title="Confirm" />
</Stepper>

Result

Loading...

Object Notation

Depending on the environment, an Array of step titles or objects may be used in lieu of using a Step component. As all Step components, steps before the currentStep index will be marked as complete by default.

Minimal

Titles can be passes as a string or as a title property to the Step configuration object.

Live Editor

<Stepper currentStep={2} steps={[ 'Pick Up Location', 'Shipping Address', 'Delivery Method', 'Confirm' ]} />

<Stepper currentStep={2} steps={[
  'Pick Up Location',
  'Shipping Address',
  'Delivery Method',
  'Confirm'
]} />

Result

Loading...

Expanded

In order to display a Step to specify one as complete, Step configuration objects will need to be used. These can also be mixed with title strings for when only one step needs to have complete specified.

Live Editor

<Stepper currentStep={1} steps={[ { title: 'Pick Up Location', complete: true }, { title: 'Shipping Address'}, 'Delivery Method', 'Confirm' ]} />

<Stepper currentStep={1} steps={[
  { title: 'Pick Up Location', complete: true },
  { title: 'Shipping Address'},
  'Delivery Method',
  'Confirm'
]} />

Result

Loading...

Step Locations and Callbacks

Steps can be directed to other locations or actions by providing href or onClick properties to the step either when using React Notation or Object Notation.

React Notation

Live Editor

<Stepper currentStep={1}> <Step onClick={(e) => { e.preventDefault(); alert('#Pick-Up-Location'); }}>Pick Up Location</Step> <Step href="#nope" title="Shipping Address" /> </Stepper>

<Stepper currentStep={1}>
  <Step onClick={(e) => { e.preventDefault(); alert('#Pick-Up-Location'); }}>Pick Up Location</Step>
  <Step href="#nope" title="Shipping Address" />
</Stepper>

Result

Loading...

Object Notation

Live Editor

<Stepper currentStep={1} steps={[ { title: 'Pick Up Location', onClick: (e) => { e.preventDefault(); alert('#Pick-Up-Location'); } }, { title: 'Shipping Address', href: '#Shipping-Address' } ]} />

<Stepper currentStep={1} steps={[
  {
    title: 'Pick Up Location',
    onClick: (e) => {
      e.preventDefault();
      alert('#Pick-Up-Location');
    }
  },
  {
    title: 'Shipping Address',
    href: '#Shipping-Address'
  }
]} />

Result

Loading...

Stepper Props

Name	Type	Default	Description
currentStep	number	1	Sets the currently selected step
size	string	"lg"	Sets size of the tooltip to either sm or lg