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

Quick checkChoose the best answer

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

Use Steps to mark current and completed stages, allowing return to completed stagesUse freely jumpable Tabs as if the stages were unrelated pagesShow only a Spinner between stages without showing total stages

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≠InputNumber

In systems such as Material Design, Steps can also be called a Stepper for a multistep flow. The plus/minus control beside an InputNumber 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
Application process
A fixed sequence with a clear finish

When NOT to use it

Use it for optional tabs or categories
Hide how many stages remain
Allow jumping ahead when required data is missing
Change the order after the process begins

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