Stepper

A .stepper shows where the user is in a fixed sequence of steps, such as a checkout. It is an <ol>, and each <li> is a step whose text is its label.

The list numbers the steps and tells assistive technology how many there are. A <small> after the label is supporting text. Use tabs for views people move between freely. A stepper is for an order they move through.

1. Cart
2. ShippingAddress and speed
3. Payment
4. Review

<ol class="stepper">
  <li class="complete"><a href="/checkout/cart">Cart</a></li>
  <li aria-current="step">Shipping<small>Address and speed</small></li>
  <li>Payment</li>
  <li>Review</li>
</ol>

States

Put aria-current="step" on the step the user is on. Only one step has it. Add complete to turn the number into a check, or invalid to turn it into "!" for a step that needs attention. Screen readers announce both states before the label. A finished step can link back with an <a>. The page keeps these states current as the user moves.

1. Cart
2. Shipping
3. PaymentCard declined
4. Review

<ol class="stepper">
  <li class="complete">Cart</li>
  <li class="complete">Shipping</li>
  <li class="invalid" aria-current="step">Payment<small>Card declined</small></li>
  <li>Review</li>
</ol>

Vertical

Add vertical to stack the steps, which suits compact windows and long labels. Without it, a horizontal stepper wraps when its row is too narrow for every label. Put a .stepper-content block in a step to show its form or summary under the label.

1. Account
2. ProfileOptional
   Add a photo and a short bio so teammates recognize you.
3. Done

<ol class="stepper vertical">
  <li class="complete">Account</li>
  <li aria-current="step">
    Profile<small>Optional</small>
    <div class="stepper-content">Add a photo and a short bio.</div>
  </li>
  <li>Done</li>
</ol>

Translation

The spoken "Completed" and "Error" labels are tokens. Set them on the stepper or any ancestor to say them in the page's own language.

<style>
  :root:lang(es) {
    --md-comp-stepper-complete-label: "Completado";
    --md-comp-stepper-error-label: "Error";
  }
</style>

Tokens

Override these on the .stepper.