---
name: Steps to complete
menu: Patterns
parent: Modules
route: /patterns/steps-to-complete
---

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

```specimen-react
<StepsToComplete label="Your progress" current={2}>
  <StepsToCompleteStep label="First Step" />
  <StepsToCompleteStep label="Second Step" />
  <StepsToCompleteStep label="Third Step" />
</StepsToComplete>
```

```specimen-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.
```

```specimen-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.

```specimen-react
<StepsToComplete label="Your progress" current={4}>
  <StepsToCompleteStep label="First Step" />
  <StepsToCompleteStep label="Second Step" />
  <StepsToCompleteStep label="Third Step" />
  <StepsToCompleteStep label="Fourth Step" />
  <StepsToCompleteStep label="Fifth Step" />
  <StepsToCompleteStep label="Sixth Step" />
</StepsToComplete>
```

## Props

#### Inverted

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

```specimen-react
backgroundColor: #003366
---
<div style={{ backgroundColor: '#003366', padding: '2rem' }}>
  <StepsToComplete label="Your progress" current={2} isDarkTheme={true}>
    <StepsToCompleteStep label="First Step" />
    <StepsToCompleteStep label="Second Step" />
    <StepsToCompleteStep label="Third Step" />
  </StepsToComplete>
</div>
```

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