Steps to complete

Steps to complete display progress through a sequence of steps.

They always display: what the single steps are, where the user is at, when a step is completed.

☝️ Research insight: During smart meter booking testing, users were confused when the progress tracker didn't progress when they moved from one page to the next during a set of "sub" questions. Ensure that every page is linked to a step on the progress tracker (even if a page is considered a "sub-step") - users expect the tracker to progress each time they go to the next page.
☝️ Research insight: Users prefer the progress tracker steps to be required steps, not optional. Including optional items in the steps to complete, especially those they aren't able to complete, makes the task feel unfinished.

When the steps-to-complete contains a large number of steps, labels are hidden and only the active step is labeled. These invisible labels are still available to screen reader users.

Props

Inverted

The isDarkTheme prop assumes there is a blue (theme.colours.brand.blue) background on the StepsToComplete's container and changes colors accordingly.

The label prop

Both the outer component and each Step subcomponent must have a label. In the case of the outer component's label it is only available invisibly to screen reader users and is marked up as an <h2> heading.

The current prop

The current prop designates the current step (the step the user is currently on, but has not completed). For example, 1 would refer to the first step, or 4 to the fourth step. All steps leading up to the current one are marked as complete and display a tick/check icon.