Steps

You might say

Checkout has three steps. Show people which step they're on at the top.

Show progress through a task with several required stagesA step indicator shows where the user is in a fixed process such as checkout or setup. Use clear stage names, mark completed and current steps, and explain whether people may move backward. It should reflect real task progress, not decorate ordinary sections.

Stepper

✓Fill in the information 2Confirm order 3Complete payment

You can say this to an AI Agent

Add Steps to checkout for Address, Delivery, Payment, and Confirm, making current, completed, and returnable stages visible. Complete Address, enter Delivery, then return to edit Address and confirm stage state and saved content remain consistent.

Steps≠Progress

Steps shows named stages in order. Progress is better for continuous work such as upload or processing completion.

Steps≠Spinner

Steps helps someone complete a multistep task. Spinner only says the system is processing; it does not move the person to a new step.

Steps≠Number Input

In systems such as Material Design, Steps can also be called a Stepper for a multistep flow. The plus/minus control beside an Number Input may use the same name, so say steps indicator or number stepper when clarity matters.

When to use it

Checkout
1Enter information2Confirm order3Complete payment
Account setup
1Basic information2Contact information3Finish
Name
Next
Application process
1Place order2Pay3Receive order
Step 2, one step left
A fixed sequence with a clear finish
1Create account2Complete your profile3Get started

When NOT to use it

Use it for optional tabs or categories
1Comments2History3Save
These are peer sections; use tabs
Hide how many stages remain
1Avatar2Nickname3Signature
Either can be filled in first, so these aren’t steps
Allow jumping ahead when required data is missing
1Fill in2Verify3Agreement4Survey5Upload6Review7Finish
Too many steps increase the burden; combine unnecessary ones
Change the order after the process begins
1Enter email2Enter password3Finish
A simple login doesn’t need multiple steps

Anatomy

✓Fill in the information

2Confirm order

Each step can be waiting, in progress, complete, or in error

A sequence number, check mark, or exclamation point marks the status of a step

Briefly describe the current step

String all the steps together and the completed segments will change color

Variants

Current

✓Fill in the information2Confirm order

Highlight it when the user has reached this step

Finished

✓Place an order✓Pay✓Receive goods

Display completion status after all steps are completed

Error

✓Place order!Payment failed3Receipt

When a step fails, mark the failed step and provide correction guidance

Typical use cases

Checkout

✓Confirm order 2Payment 3Receipt

🎧 Shengkuo Q45 Noise Canceling Headphones ×1¥ 899

Total ¥ 899

Onboarding

1Basic information 2Contact information 3Complete

Name

City

Application form

Welcome to Museon

One step left, verify your email to complete the registration

✓Create account 2Verify email 3Get started

2 6

Import wizard

Article publishing progressUnder review

✓Submit for review 2Preliminary review of content 3Final review 4Publish

📄"Mountain Life: Weekend Hiking Equipment List" has entered the preliminary content review and is expected to be completed within 2 hours

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

Quick check

Checkout has Address, Delivery, Payment, and Confirm, and people may return to an earlier step. How should current position be shown?

A. Show only a Spinner between stages without showing total stagesB. Use Steps to mark current and completed stages, allowing return to completed stagesC. Use freely jumpable Tabs as if the stages were unrelated pages