--- title: Step summary: "Steps show where the user is in a multi-step process: which steps are done, which one is active and which are left." description: Guide users through multi-step processes with a steps indicator. Show completed, active, and upcoming steps in a clear layout. related: [/ui/components/progress-step] source: core/scss/ui/_steps.scss css-vars: steps classnames: component: - class: steps desc: Container element part: - class: step-item desc: One step; mark the current one with aria-current="step" modifier: - class: steps-counter desc: Numbers the steps direction: - class: steps-vertical desc: Stacks the steps in a column color: - class: steps-{color} desc: Any base color for the completed steps; -lt variants use the soft tint --- import Example from '@components/Example.astro'; ## Default markup Use the `.steps` class for the list and `.step-item` for each step. The `active` class marks the current step. ```html

Step 1 Step 2 Step 3

``` Four steps, with the third one active:

Step 1 Step 2 Step 3 Step 4

## Tooltips Add a [tooltip](/ui/components/tooltip) to a step to explain it on hover, for example when the step titles are short. To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute. ```html Step 1 ``` A tracker with a tooltip on each step:

Step 1 Step 2 Step 3 Step 4

## Color Change the color with a `steps-*` class, using any name from the [color palette](/ui/base/colors). ```html

...

``` Two color schemes:

Step 1 Step 2 Step 3 Step 4

## Steps without title When there's no room for titles, use steps without them and put the details in tooltips.

## Steps with numbers The `steps-counter` class shows a number in each step instead of a title. ```html

...

``` Numbered steps in another color:

## Accessibility - Use an ordered list for the steps. The numbering is meaning, not decoration, so let the markup carry it. - Mark the current step with `aria-current="step"`. The `active` class only changes the colors. - A completed step and a pending one must differ in more than color - a checkmark, a label, or the word "done". - If a step is a link, keep it a real link; if it cannot be reached yet, use `aria-disabled="true"` and take it out of the tab order.