<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Step Indicator

A navigational element that shows the user's progress in a series of steps within a design or order flow.
styleKeys: stepIndicator

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.

The preview has been updated.

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

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

The preview has been updated.

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

The preview has been updated.

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.

The preview has been updated.

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.

  • Use a Step Indicator to break up tasks into manageable steps, which helps the user avoid information overload and assists in decision-making.
  • A Step Indicator is commonly used on product page configurators.
  • On mobile devices, implement adaptive design and use an Accordion instead of Step Indicator to indicate progress (the Step Indicator will not automatically adjust to an Accordion).

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.
proptyperequireddescriptiondefault
skin"standard" | "error" | nullfalse
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.
proptyperequireddescriptiondefault
stepNumbernumbertrue
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.
proptyperequireddescriptiondefault
currentStepNumbernumbertrue
The number of the currently active step
1
showAllStepsboolean | nullfalse
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.
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 7, 2022Last updated: Sep 18, 2024