# Stepper

> Progress through a fixed sequence of steps, such as a checkout, with each step's state.

## Anatomy

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](/tabs.html.md) for views people move between freely. A stepper is for an order they move through.

1.  [Cart](#states)
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`.

| Token | Default |
| --- | --- |
| `--md-comp-stepper-indicator-size` | 24px |
| `--md-comp-stepper-connector-color` | `--md-sys-color-outline-variant`; after a complete step: `--md-sys-color-primary` |
| `--md-comp-stepper-active-color` | `--md-sys-color-primary` |
| `--md-comp-stepper-complete-label` | `"Completed"` |
| `--md-comp-stepper-error-label` | `"Error"` |