Stepper

Last update

The FCDO Stepper component shows a user's progress through a series of related steps. It helps users understand where they are in a process, which steps they have completed and what steps remain.

Use the stepper for processes that are completed in a defined sequence, such as completing an application or progressing through a workflow.

The stepper supports three states:

• Completed - shows a green tick to indicate that the step has been completed.
• Active - highlights the current step using the FCDO primary blue and yellow focus colour.
• Upcoming - shows a numbered grey step to indicate that it has not yet been reached.

Keep step labels short and descriptive. Avoid using a stepper for processes where users can complete steps in any order.