Progress Stepper

A progress stepper visually represents the user's progress and completion status of each step in a process.

Overview

The purpose of progress steppers is to guide users through a series of steps, visually indicating their progress and completion status. It helps users navigate complex processes, maintain a sense of orientation, and ensures a smoother user journey.

Progress steppers are commonly used in multi-step forms, onboarding processes, checkout flows or any situation where a complex task is divided into manageable steps. They enhance the user experience by providing a visual roadmap and aiding in task completion.

A progress stepper that displays different steps of a flow.

Resources

Figma Component	Available
Figma Documentation	Available
Web Components	Planned
Vue [Fozzie]	N/A
React [Snacks]	N/A
iOS JustUI [UI Kit]	N/A
iOS PIE [SwiftUI]	N/A
Android [XML views]	TBC
Android [Jetpack compose]	TBC