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.



The isDarkTheme prop assumes there is a 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.

Matthew James Cowlishaw, Matthew David Smith and Daniel Francis Butters, each Insolvency Practitioners of Teneo Restructuring Ltd, were appointed Joint Energy Administrators of Bulb Energy Limited on 24 November 2021. The affairs, business and property of the Company are managed by the Joint Energy Administrators. The Joint Energy Administrators act as agents of the Company and contract without personal liability.