Frontend

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.
Also calledStepper
✓Fill in the information 2Confirm order 3Complete payment
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