Step Indicator

React Usage

In the most basic example, StepIndicator is provided a currentStepNumber, and each StepIndicatorStep is provided a stepNumber.

The stepNumber values can start at 0 or 1 (or whatever you'd like), but they need to be consecutive in order for the Step Indicator to find the previous and next step based on the current step.

<StepIndicator currentStepNumber={1}>
  <StepIndicatorStepList>
    <StepIndicatorStep stepNumber={1}>Step 1</StepIndicatorStep>
    <StepIndicatorStep stepNumber={2}>Step 2</StepIndicatorStep>
    <StepIndicatorStep stepNumber={3}>Step 3</StepIndicatorStep>
    <StepIndicatorStep stepNumber={4}>Step 4</StepIndicatorStep>
  </StepIndicatorStepList>
</StepIndicator>

Vanilla Usage

The Step Indicator is a <div> tag that wraps an <ol> tag; each step is an <li> tag inside that list with a specific set of CSS classes and ARIA attributes on it.

• All past steps should have class step-past on them. The immediate previous step should also get class step-previous.

• All future steps should have class step-future on them. The immediate next step should also get class step-next.

• The current step needs both class step-current as well as aria-current="step".

<div class="step-indicator">
  <ol>
    <li class="step step-past step-previous">Step 1</li>
    <li class="step step-current" aria-current="step">Step 2</li>
    <li class="step step-future step-next">Step 3</li>
    <li class="step step-future">Step 4</li>
  </ol>
</div>

Links

If clicking on a previous or future step takes the user to that page, then you should place a link right inside each step, wrapping the other content:

<StepIndicator currentStepNumber={2}>
  <StepIndicatorStepList>
    <StepIndicatorStep stepNumber={1}>
      <Link href="#">Step 1</Link>
    </StepIndicatorStep>
    <StepIndicatorStep stepNumber={2}>Step 2</StepIndicatorStep>
    <StepIndicatorStep stepNumber={3}>
      <Link href="#">Step 3</Link>
    </StepIndicatorStep>
  </StepIndicatorStepList>
</StepIndicator>

<StepIndicatorStep stepNumber={1}>
  <Link href="somehref">Step 1</Link>
</StepIndicatorStep>

<li class="step step-past step-previous">
  <a class="link" href="somehref">Step 1</a>
</li>

However, if there's no actual navigation, and clicking the step performs an in-page action instead of taking you to a new page, then the step should be coded as a <button> tag instead of an actual link:

<StepIndicator currentStepNumber={2}>
  <StepIndicatorStepList>
    <StepIndicatorStep stepNumber={1}>
      <Link component="button">Step 1</Link>
    </StepIndicatorStep>
    <StepIndicatorStep stepNumber={2}>Step 2</StepIndicatorStep>
    <StepIndicatorStep stepNumber={3}>
      <Link component="button">Step 3</Link>
    </StepIndicatorStep>
  </StepIndicatorStepList>
</StepIndicator>

<StepIndicatorStep stepNumber={1}>
  <Link component="button">Step 1</Link>
</StepIndicatorStep>

<li class="step step-past step-previous">
  <button class="link">Step 1</button>
  <!-- don't forget class="link" -->
</li>

Displaying Values

A Step Indicator is often used for a product wizard, where the user makes choices as they proceed. Step Indicator can show the values for these choices.

After the main content for the step, place a "step value" component inside the step that holds the value. There is also an "error" skin that you can place onto the step to indicate that there is an error associated with that value.

<StepIndicator currentStepNumber={3}>
  <StepIndicatorStepList>
    <StepIndicatorStep stepNumber={1}>
      Step 1<StepIndicatorStepValue>Glossy</StepIndicatorStepValue>
    </StepIndicatorStep>
    <StepIndicatorStep stepNumber={2}>
      Step 2
      <StepIndicatorStepValue skin="error">
        Rounded Corners
      </StepIndicatorStepValue>
    </StepIndicatorStep>
    <StepIndicatorStep stepNumber={3}>Step 3</StepIndicatorStep>
    <StepIndicatorStep stepNumber={4}>Step 4</StepIndicatorStep>
  </StepIndicatorStepList>
</StepIndicator>

<>
  <StepIndicatorStep stepNumber={1}>
    Step 1<StepIndicatorStepValue>Glossy</StepIndicatorStepValue>
  </StepIndicatorStep>
  <StepIndicatorStep stepNumber={2}>
    Step 2
    <StepIndicatorStepValue skin="error">
      Rounded Corners
    </StepIndicatorStepValue>
  </StepIndicatorStep>
</>

<li class="step step-past">
  Step 1
  <span class="step-value">Glossy</span>
</li>
<li class="step step-past step-previous">
  Step 2
  <span class="step-value step-value-skin-error">Rounded Corners</span>
</li>

Accordion as a Step Indicator

Because Extra-Small screens like phones don't provide a lot of horizontal real estate, a Step Indicator is not ideal on these screens. Instead, on Extra-Small screens, implement adaptive design and use an Accordion instead of Step Indicator to indicate progress.

Check out our tutorial on how you can properly leverage our Accordion component to achieve this design.

Components

Guidelines

Do

• Use an Accordion on Extra-Small screens instead of a Step Indicator.

• Use on product page configurators.

Don't

• Use a Step Indicator to show a series of steps, unless it also shows the user’s current position in that series.