Step Indicator | Components

Use Step Indicator...

To display progress and afford navigation through a series of logical and numbered steps.
Break up tasks into manageable steps, which helps the user avoid information overload and assists in decision-making.

Don't use Step Indicator...

To indicate progress on Extra-Small screens. Use Accordion instead.
To show a series of steps when the user’s current position in that series is not displayed.

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.

ReactVanilla

<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>

<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>

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

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

In Vanilla, 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 swan-step-past on them. The immediate previous step should also get class swan-step-previous.
All future steps should have class swan-step-future on them. The immediate next step should also get class swan-step-next.
The current step needs both the classes, swan-step-current as well as aria-current="step".

Links

Use <Link to="#"> inside each step to take the user to a new page.

ReactVanilla

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

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

<div class="swan-step-indicator">
  <ol>
    <li class="swan-step swan-step-past swan-step-previous">
      <a href="#" class="swan-link">Step 1</a>
    </li>
    <li aria-current="step" class="swan-step swan-step-current">Step 2</li>
    <li class="swan-step swan-step-next swan-step-future">
      <a href="#" class="swan-link">Step 3</a>
    </li>
  </ol>
</div>

<div class="swan-step-indicator">
  <ol>
    <li class="swan-step swan-step-past swan-step-previous">
      <a href="#" class="swan-link">Step 1</a>
    </li>
    <li aria-current="step" class="swan-step swan-step-current">Step 2</li>
    <li class="swan-step swan-step-next swan-step-future">
      <a href="#" class="swan-link">Step 3</a>
    </li>
  </ol>
</div>

Use <Link as="button"> to perform an in-page action, instead of taking the user to a new page.

ReactVanilla

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

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

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

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

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.

Use <StepIndicatorStepValue> to hold a value inside a step.

Use skin="error" to indicate that there is an error associated with that value.

ReactVanilla

<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>

<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>

<div class="swan-step-indicator">
  <ol>
    <li class="swan-step swan-step-past">
      Step 1<span class="swan-step-value">Glossy</span>
    </li>
    <li class="swan-step swan-step-past swan-step-previous">
      Step 2
      <span class="swan-step-value swan-step-value-skin-error"
        >Rounded Corners</span
      >
    </li>
    <li aria-current="step" class="swan-step swan-step-current">Step 3</li>
    <li class="swan-step swan-step-next swan-step-future">Step 4</li>
  </ol>
</div>

<div class="swan-step-indicator">
  <ol>
    <li class="swan-step swan-step-past">
      Step 1<span class="swan-step-value">Glossy</span>
    </li>
    <li class="swan-step swan-step-past swan-step-previous">
      Step 2
      <span class="swan-step-value swan-step-value-skin-error"
        >Rounded Corners</span
      >
    </li>
    <li aria-current="step" class="swan-step swan-step-current">Step 3</li>
    <li class="swan-step swan-step-next swan-step-future">Step 4</li>
  </ol>
</div>

On Smaller Screens

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

However, if you are unable to do this, the component will change its display on Extra-Small screens, instead only showing the text for the current step, with left- and right-arrow buttons to advance backward and forward. Use the showAllSteps prop to override this setting, which will retain the desktop look even on a phone; we advise using this option only if you have a small number of steps and short text.

Props

StepIndicatorStepValue

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
skin	`"standard" \| "error" \| null`	false	Visual style of StepIndicatorStepValue Available options: "standard", "error"	standard

StepIndicatorStep

This component is implemented using the <li /> as the root element. You can utilize the native attributes supported by <li /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
stepNumber	`number`	true	Number of the step	1

StepIndicator

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
currentStepNumber	`number`	true	The number of the currently active step	1
showAllSteps	`boolean \| null`	false	Specifies if all steps should be shown, or only the current step	null

StepIndicatorStepList

This component is implemented using the <ol /> as the root element. You can utilize the native attributes supported by <ol /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.