Stepper

The Stepper component helps users keep track of their progress while going through a process. It's frequently used in forms, sign-up processes, and other situations where users have to provide information or complete a series of steps in a particular sequence.

• Interactive Playground
• Anatomy
• States
• Types
• Behavior
• Specs
• Keyboard Interactions

The Interactive Playground allows you to experiment with various stepper styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div class="neo-stepper">
  <div
    role="button"
    tabindex="0"
    class="neo-stepper__item neo-stepper__item--complete neo-stepper__item--editable"
  >
    <div>
      <p>
        Step 1
      </p>
      <p>
        This is step 1
      </p>
    </div>
  </div>
  <div
    role="button"
    tabindex="0"
    class="neo-stepper__item neo-stepper__item--active"
  >
    <div>
      <p>
        Step 2
      </p>
      <p>
        This is step 2
      </p>
    </div>
  </div>
  <div
    role="button"
    tabindex="0"
    class="neo-stepper__item neo-stepper__item--disabled neo-stepper__item--disabled-next"
  >
    <div>
      <p>
        Step 3
      </p>
      <p>
        This is step 3
      </p>
    </div>
  </div>
</div>

<Stepper
  activeStep={1}
  direction="horizontal"
  steps={[
    {
      description: 'This is step 1',
      title: 'Step 1'
    },
    {
      description: 'This is step 2',
      title: 'Step 2'
    },
    {
      description: 'This is step 3',
      title: 'Step 3'
    }
  ]}
  type="editable"
/>

The stepper flows from left-to-right, or from top-to-bottom, with a series of icons representing the user’s progress and success through a procedure. A stepper can be designed with or without labels.

• Completed Step:

  This step has been partially or fully completed. It can display the editable, error, or complete state.

• Active Connector:

  The heavier line shows that the attached steps have been fully or partially completed.

• Current Step:

  Shows the stage reached in the procedure. The details for this step are currently on the screen.

• Inactive Connector:

  The thinner line shows the attached steps have not yet been completed.

• Inactive Step:

  These stages have not yet had any actions taken or details entered by the user.

• Title:

  Labels for each step are not required but do provide additional guidance to the user regarding their progress.

• Description:

  If titles are used, a brief explanation of each stage can also be included to further clarify the step.

The step indicator can appear in several states depending upon how much of each step has been completed.

Complete

Editable

Active

Inactive

• Complete:

  This step in the process has been completed. All required information has been entered and all required actions taken. The user cannot return to this page to make changes.

• Editable:

  Some or all of the elements of this step have been completed. The user can click the icon to return to the step to make changes.

• Active:

  Shows the currently displayed step.

• Inactive:

  These stages have not yet had any actions taken or details entered by the user.

A stepper component can be configured as Editable or Non-editable.

Editable

An editable stepper allows the user to jump to previous stages to verify and modify the data or actions. This type of stepper component is commonly used in forms where users need to add information, change their answers or correct errors.

Non-editable

A non-editable stepper component does not allow users to return to the stage. Once the user has completed a step, they cannot later return to edit their input or change their actions. This type of stepper is commonly used in linear processes where the steps must be completed in a specific order.

DO: Indicate the user's progress through the stepper with the appropriate state icons and connectors.

DON'T: Do not use any other icons or visual elements that may distract or confuse the user.

The behavior of the stepper is governed by how it is displayed and how it responds to user input.

Horizontal Alignment

A horizontal stepper component displays the stages from left-to-right across the pane. It is center-justified.

Vertical Alignment

A vertical stepper component displays stages from top-to-bottom down the left side of the pane.

Title

Steppers have the option to include a title and an additional short line of descriptive text beneath.

Steppers can be built without labels to make viewing progress easier, although it may be harder to understand what is happening at each step.

DO: Be consistent. Add labels on all or none of the steps.

DON'T: Do not have a labels for some steps and not others.

Truncation

When there are too many stages to show the stepper within a single pane, add arrow icons to allow navigation to the steps that are not currently visible (e.g. Previous, Next).

Using arrow icons, similar to a carousel, a user can access all of the steps in the process.

The size and padding of the stepper component is shown below.

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.