Commerce

CheckoutSteps

Where a reader stands in a checkout: the steps behind them, the one in progress and the ones still ahead, as one compact row.

Basic

Pass the step names in order and the zero-based index of the one in progress. A finished step keeps its number in a brand tint, the current one is filled, and the steps ahead stay quiet. Use the buttons to move through the example.

Accessibility

The row is a navigation landmark holding an ordered list, named by label. The current step carries aria-current="step", so a screen reader names it as the current step and not only by its position. The numbers and the separators are hidden from the reading order, because the list already counts the steps.

Four steps is the most that stays readable on a phone. Below the sm breakpoint the row sets its text a step smaller, and it wraps rather than scrolling sideways.

API