Step Indicator

The Step Indicator guides users through a number of steps across multiple screens in order to complete the task.

The standard indicator displays a label for each step on larger screen sizes and scales to a more condensed version on XS/Small screen sizes.

1 Step 1 2 Step 2 3 Step 3 (Sublabel) 4 Step 4 5 Step 5 6 Step 6

This is the most common step indicator and should be used in most instances.

Do not use as a form of pagination.
On smaller screen sizes, it may be preferred to use a Standard Indicator with Dropdown (as this provides the user with more insight into subsequent steps in a process).

Standard Indicator (shown above)
Standard Indicator with Dropdown
Condensed Indicator
Dropdown Indicator

Keep the number of steps at a minimum (target 3 to 6 steps). For larger processes, consider breaking up into separate process flows. If a small number of steps is not possible, consider using the Standard Indicator with Dropdown or the Dropdown Indicator (as these allow for a large number of steps to be indicated within smaller screen sizes).

The step indicator should appear at the top of the screen, below the main navigation.
The step width flexes with the size of the container. There is a minimum width of 100px, and a maximum width of 160px. No step in this format should exceed this 160px even when a container far exceeds the total width of the step indicator.
Replace the “Step X” label with the corresponding name of the step and keep labels extremely succinct.

In the event that a step indicator requires a heading (separate from the Page Title), the following may be used:

Heading (Optional)

1 Step 1 2 Step 2 3 Step 3 (Sublabel) 4 Step 4 5 Step 5 6 Step 6

This version displays the standard step indicator on wider screen resolutions, transitions to a condensed variation on medium screen sizes and transitions to a dropdown variation on the smallest screen sizes.

Use when there are a large number of steps and it is important to see the name of the steps on smaller screen sizes.

For processes with fewer steps, the standard step indicator is preferred.

The condensed step indicator is similar to the standard step indicator with the exception of not including the label beneath each individual step. The label may appear above the step indicator, as an optional element

Smaller scale
Does not display a label below; instead the label displays on tap/hover
Can wrap to more than one line, based on available space
May display a label name (current step only) above the indicator (optional)

1 Step 1 2 Step 2 3 Step 3 (Sublabel) 4 Step 4 5 Step 5 6 Step 6

Use when there is limited horizontal space or when a smaller scale is preferred (on mobile applications, for example).
When communicating the number of steps is important AND when it is not critical to communicate the name of each step.

When it is important for the user to know the name of each subsequent step.

On desktop, A tooltip should display on hover or tap to label each step.
Try to limit the number of steps to six or fewer.

Use on smaller screen sizes when communicating the name of each step and/or the ability to navigate between steps is important to users.

Not recommended for larger screen resolutions.
Not recommended for short process flows.

Use a disabled state for steps that the user is not able to access.
When the user selects a step in the dropdown, the specified step should load and the indicator should display the new step.

There are 3 parameters in this component: type, header and subtitle.

type represents different variation of Step Indicator including Standard Indicator, Standard Indicator with Dropdown, Condensed Indicator and Dropdown Indicator.
Default type is Standard Indicator.
header represents the component whether have a heading (separate from the Page Title).
subtitle represents the component whether have an extra label above the indicator.

Parameters can be set via HTML attribute or JavaScript. Add data-type, data-header or data-subtitle as attribute of component HTML node or using var stepInstance = new Spark.StepIndicator(el, {type:'condensed', header:true, subtitle:true}); to finish component configuration.

Notice: Configuartion via JavaScript has higher prority than configuartion via HTML attribute.

There are 4 methods provided for user to manipulate component: setStepState(), update(), bindStepClickCallback() and removeStepClickCallback().

setStepState() is for set certain state for certain step. There are 4 states: completed, current, disabled and incomplete. Notice that if you set a node to current, it will remove current state from other steps.
update() is for manually update style of component. User can directly change value of configuartion like type, header and subtitle, and after that update() should be called to update style in the page.
bindStepClickCallback() is for user to bind custom callback function on step click event.
removeStepClickCallback() is for user to remove custom callback function on step click event.

1 Step 1 2 Step 2 3 Step 3 (Sublabel) 4 Step 4 5 Step 5 6 Step 6

<div class="spark-step-indicator">

    <h4 class="spark-step-indicator__title">Default</h4>

    <div class="spark-step-indicator__body">

      <div class="spark-step-indicator__subtitle">
        2. Choose a Flight
      </div>

      <div class="spark-step-indicator__list">

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--completed">
          <span class="spark-step-indicator__icon">1</span>
          <span class="spark-step-indicator__text">
            Step 1
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--current">
          <span class="spark-step-indicator__icon">2</span>
          <span class="spark-step-indicator__text">
            Step 2
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">3</span>
          <span class="spark-step-indicator__text">
            Step 3
            <small class="spark-step-indicator__subtext">(Sublabel)</small>
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">4</span>
          <span class="spark-step-indicator__text">
            Step 4
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">5</span>
          <span class="spark-step-indicator__text">
            Step 5
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--disabled">
          <span class="spark-step-indicator__icon">6</span>
          <span class="spark-step-indicator__text">
            Step 6
          </span>
        </a>

      </div>

    </div>

  </div>

// Vanilla JS
var el = document.querySelector('.spark-step-indicator');
var stepInstance = new Spark.StepIndicator(el);

// jQuery
$('.spark-step-indicator').sparkStepIndicator();

This is default type of Step Indicator. You don’t need to set any parameters.

1 Step 1 2 Step 2 3 Step 3 (Sublabel) 4 Step 4 5 Step 5 6 Step 6

<div class="spark-step-indicator" data-type="standard-dropdown">

    <h4 class="spark-step-indicator__title">Default</h4>

    <div class="spark-step-indicator__body">

      <div class="spark-step-indicator__subtitle">
        2. Choose a Flight
      </div>

      <div class="spark-step-indicator__list">

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--completed">
          <span class="spark-step-indicator__icon">1</span>
          <span class="spark-step-indicator__text">
            Step 1
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--current">
          <span class="spark-step-indicator__icon">2</span>
          <span class="spark-step-indicator__text">
            Step 2
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">3</span>
          <span class="spark-step-indicator__text">
            Step 3
            <small class="spark-step-indicator__subtext">(Sublabel)</small>
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">4</span>
          <span class="spark-step-indicator__text">
            Step 4
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">5</span>
          <span class="spark-step-indicator__text">
            Step 5
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--disabled">
          <span class="spark-step-indicator__icon">6</span>
          <span class="spark-step-indicator__text">
            Step 6
          </span>
        </a>

      </div>

    </div>

  </div>

// Vanilla JS
var el = document.querySelector('.spark-step-indicator');
var stepInstance = new Spark.StepIndicator(el, {type:'standard-dropdown'});

// jQuery
$('.spark-step-indicator').sparkStepIndicator();

You can set data-type='standard-dropdown', or directly set parameter type='standard-dropdown' to set this variation.

1 Step 1 2 Step 2 3 Step 3 (Sublabel) 4 Step 4 5 Step 5 6 Step 6

<div class="spark-step-indicator" data-type="large">

    <h4 class="spark-step-indicator__title">Default</h4>

    <div class="spark-step-indicator__body">

      <div class="spark-step-indicator__subtitle">
        2. Choose a Flight
      </div>

      <div class="spark-step-indicator__list">

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--completed">
          <span class="spark-step-indicator__icon">1</span>
          <span class="spark-step-indicator__text">
            Step 1
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--current">
          <span class="spark-step-indicator__icon">2</span>
          <span class="spark-step-indicator__text">
            Step 2
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">3</span>
          <span class="spark-step-indicator__text">
            Step 3
            <small class="spark-step-indicator__subtext">(Sublabel)</small>
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">4</span>
          <span class="spark-step-indicator__text">
            Step 4
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">5</span>
          <span class="spark-step-indicator__text">
            Step 5
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--disabled">
          <span class="spark-step-indicator__icon">6</span>
          <span class="spark-step-indicator__text">
            Step 6
          </span>
        </a>

      </div>

    </div>

  </div>

// Vanilla JS
var el = document.querySelector('.spark-step-indicator');
var stepInstance = new Spark.StepIndicator(el, {type:'large'});

// jQuery
$('.spark-step-indicator').sparkStepIndicator();

You can set data-type='large', or directly set parameter type='large' to set this variation.

This variation is not recommended directly using in product. It will remain “large” style and will wrap if there is not enough space. It can be used in setting custom breakpoint by configuring type and update().

1 Step 1 2 Step 2 3 Step 3 (Sublabel) 4 Step 4 5 Step 5 6 Step 6

<div class="spark-step-indicator" data-type="condensed">

    <h4 class="spark-step-indicator__title">Default</h4>

    <div class="spark-step-indicator__body">

      <div class="spark-step-indicator__subtitle">
        2. Choose a Flight
      </div>

      <div class="spark-step-indicator__list">

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--completed">
          <span class="spark-step-indicator__icon">1</span>
          <span class="spark-step-indicator__text">
            Step 1
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--current">
          <span class="spark-step-indicator__icon">2</span>
          <span class="spark-step-indicator__text">
            Step 2
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">3</span>
          <span class="spark-step-indicator__text">
            Step 3
            <small class="spark-step-indicator__subtext">(Sublabel)</small>
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">4</span>
          <span class="spark-step-indicator__text">
            Step 4
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">5</span>
          <span class="spark-step-indicator__text">
            Step 5
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--disabled">
          <span class="spark-step-indicator__icon">6</span>
          <span class="spark-step-indicator__text">
            Step 6
          </span>
        </a>

      </div>

    </div>

  </div>

// Vanilla JS
var el = document.querySelector('.spark-step-indicator');
var stepInstance = new Spark.StepIndicator(el, {type:'condensed'});

// jQuery
$('.spark-step-indicator').sparkStepIndicator();

You can set data-type='condensed', or directly set parameter type='condensed' to set this variation.

<div class="spark-step-indicator" data-type="dropdown" style="max-width:500px;margin:auto">

    <h4 class="spark-step-indicator__title">Default</h4>

    <div class="spark-step-indicator__body">

      <div class="spark-step-indicator__subtitle">
        2. Choose a Flight
      </div>

      <div class="spark-step-indicator__list">

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--completed">
          <span class="spark-step-indicator__icon">1</span>
          <span class="spark-step-indicator__text">
            Step 1
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--current">
          <span class="spark-step-indicator__icon">2</span>
          <span class="spark-step-indicator__text">
            Step 2
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">3</span>
          <span class="spark-step-indicator__text">
            Step 3
            <small class="spark-step-indicator__subtext">(Sublabel)</small>
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">4</span>
          <span class="spark-step-indicator__text">
            Step 4
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item">
          <span class="spark-step-indicator__icon">5</span>
          <span class="spark-step-indicator__text">
            Step 5
          </span>
        </a>

        <a href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--disabled">
          <span class="spark-step-indicator__icon">6</span>
          <span class="spark-step-indicator__text">
            Step 6
          </span>
        </a>

      </div>

    </div>

  </div>

// Vanilla JS
var el = document.querySelector('.spark-step-indicator', {type:'dropdown'});
var stepInstance = new Spark.StepIndicator(el);

// jQuery
$('.spark-step-indicator').sparkStepIndicator();

You can set data-type='dropdown', or directly set parameter type='dropdown' to set this variation.

Standard Step Indicator
Usage
Variations
Usage

Step Indicator

Standard Step Indicator

Default

When to Use

When Not to Use

Variations

Usage

Number of Steps

Visual Display

Header Option

Heading (Optional)

Variations

Default

When to Use

When Not to Use

Condensed Indicator

Default

When to Use

When Not to Use

Additional Guidelines

Default

When to Use

When Not to Use

Additional Guidelines

Usage

Standard Indicator

Default

Default

Large Indicator

Default

Condensed Indicator

Default

Default