Step Indicator

Step indicator visualizes progression through a series of discrete steps.

Interactive demo

This demo lets you preview the step indicator component.

<CodeViewerExample>
  <StepIndicator>
    <Step
      className="pointer"
      isSelected
      name="register"
      onClick={function noRefCheck() {}}
    >
      Step 1
    </Step>
    <Step
      className="pointer"
      name="limits"
      onClick={function noRefCheck() {}}
    >
      Step 2
    </Step>
    <Step
      className="pointer"
      name="deposit"
      onClick={function noRefCheck() {}}
    >
      Step 3
    </Step>
  </StepIndicator>
</CodeViewerExample>

Usage

Consider using step indicator in scenarios where the user has to complete a sequence of tasks, and the interaction can benefit from having progression visualized and tracked.

Helpful titles

Give thought to the name of the titles of the steps in your journey.

Do

Use descriptive titles for included steps to help the user anticipate what to expect.

Don't

Use generic titles that are not helpful for the user in completing the task.

Formatting

Anatomy

Step indicator consists of a bar with a variable number of segments. A segment is either in an active or inactive state.

1. Text
   a. Inactive step (completed)
   b. Active step
   c. Inactive step
   d. Title

2. Checkmark
   a. Inactive step (completed)
   b. Active step
   c. Inactive step
   d. Checkmark

Active step

Indicates the current step presented to the user.

Inactive step

Indicate steps the user has completed and steps the user has yet to complete.

Title / checkmark

The title of the corresponding step. For completed steps, the corresponding title text can be substituted for a green checkmark if desired.

Behavior

Progression

As the user completes steps in the process the previous section changes to inactive state, and the new current section switches to active.

Collapsed

Expanded

Interaction

The step indicator may be configured to allow the user to progress forward and back through the available steps by clicking on a segment of their choice. Keep in mind if the user is required to complete tasks in order to progress, having the steps interactable may not be desirable. In a form-type context having back or edit functionality in connection with the form may be the better option.

Animation

Step indicator allows for animation of the transition from one step to another.

Modify

Step indicator can be extended and contracted horizontally as desired. Keep in mind that with multiple steps in smaller devices the length of the title text will be restricted.

Arrow or flat end

The outer border of the last segment can be configured to have an arrow shape or a flat shape. If the task can be considered finished after the completion of the last step included in the step indicator, the flat shape should be used. If there are related additional tasks following the final steps, the arrow option can help indicate this.

Step indicator featuring a flat shaped end segment

Step indicator featuring a arrow shaped end segment

Interaction

Configure if interaction with the sections to navigate between steps should be available to the user or not.

Animation

The duration of the animation indicating the completion of one step and moving on to the next may be configured. Allowed durations in milliseconds are: 200, 1000, 2000, 3000, 4000, 5000 and 8000.

Title text or checkmark

Completed steps can be presented with either the same title as in its non-completed state, or a green checkmark icon.

Completed steps in default configuration

Titles of completed steps replaced by checkmarks

Brand

Step indicator is available in an inverted theme to be used on dark backgrounds.