Stepper

A stepper is a navigation component that guides users through a multi-stage process by visualizing their progress. It shows the total number of steps, indicates the user's current position, and previews what's next, making complex tasks feel more manageable.

When to use

Multi-step forms

Ideal for checkout processes, application forms, or any form that is logically divided into distinct sections.

Multi-step forms

Ideal for checkout processes, application forms, or any form that is logically divided into distinct sections.

Multi-step forms

Ideal for checkout processes, application forms, or any form that is logically divided into distinct sections.

Setup wizards

Use it to guide users through an initial configuration or onboarding flow.

Setup wizards

Use it to guide users through an initial configuration or onboarding flow.

Setup wizards

Use it to guide users through an initial configuration or onboarding flow.

Process tracking

To show the status of a linear workflow, such as order fulfillment ("Processing" → "Shipped" → "Delivered").

Process tracking

To show the status of a linear workflow, such as order fulfillment ("Processing" → "Shipped" → "Delivered").

Process tracking

To show the status of a linear workflow, such as order fulfillment ("Processing" → "Shipped" → "Delivered").

When to avoid

Non-linear tasks

If users can complete steps in any order, a stepper is not appropriate. Use a checklist or dashboard instead.

Non-linear tasks

If users can complete steps in any order, a stepper is not appropriate. Use a checklist or dashboard instead.

Non-linear tasks

If users can complete steps in any order, a stepper is not appropriate. Use a checklist or dashboard instead.

Simple forms

For short forms that can be completed on a single page, a stepper adds unnecessary complexity.

Simple forms

For short forms that can be completed on a single page, a stepper adds unnecessary complexity.

Simple forms

For short forms that can be completed on a single page, a stepper adds unnecessary complexity.

Main navigation

A stepper should not be used for primary site navigation; its purpose is to guide users through a single, contained task.

Main navigation

A stepper should not be used for primary site navigation; its purpose is to guide users through a single, contained task.

Main navigation

A stepper should not be used for primary site navigation; its purpose is to guide users through a single, contained task.

Specifications

Step indicator size

Large

Small

Large

Small

Large

Small

Position

Horizontal

Vertical

Horizontal

Vertical

Horizontal

Vertical

Horizontal

Vertical

Behavior

Done, Current, & Upcoming states

As the user progresses through the steps, the stepper visually highlights the current step to show their position in the process.

Done, Current, & Upcoming states

As the user progresses through the steps, the stepper visually highlights the current step to show their position in the process.

Done, Current, & Upcoming states

As the user progresses through the steps, the stepper visually highlights the current step to show their position in the process.

Anatomy

Indicator

The circular element that contains the step number or an icon (like a checkmark). Its style changes based on the step's state.

Label

The descriptive text that names the step.

Supporting text

Optional text that can be used as short descriptor text.

Connector

The line that visually connects one step to the next, illustrating the linear flow of the process.

Step number

The number inside the indicator.

Value

Stepper

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing