tabler/docs/content/ui/components/step.mdx

---
title: Step
summary: A step is used to guide users through a complex process and make it easier to complete. Breaking a multi-step process into smaller parts and tracking progress along the way helps users finish it successfully.
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
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';
import CodeDocs from '@components/CodeDocs.astro';

## Default markup

Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.

To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process.

```html
<div class="steps">
  <a href="#" class="step-item"> Step 1 </a>
  <a href="#" class="step-item"> Step 2 </a>
  <a href="#" class="step-item active"> Step 3 </a>
</div>
```

The example below demonstrates a simple progress tracker with four steps, where the third step is active.

<Example>
<div class="steps">
  <a href="#" class="step-item">Step 1</a>
  <a href="#" class="step-item">Step 2</a>
  <a href="#" class="step-item active">Step 3</a>
  <span href="#" class="step-item">Step 4</span>
</div>
</Example>

## Tooltips

Add [tooltips](/ui/components/tooltip) if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.

To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute.

```html
<a
  href="#"
  class="step-item"
  data-bs-toggle="tooltip"
  data-bs-placement="top"
  title="Step 1 description"
>
  Step 1
</a>
```

The example below demonstrates a progress tracker with tooltips for each step.

<Example>
<div class="steps">
  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description"> Step 1 </a>
  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description"> Step 2 </a>
  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description"> Step 3 </a>
  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description"> Step 4 </span>
</div>
</Example>

## Color

You can customize the default progress indicator by changing the color to one that better suits your design. See the [full list of available colors](/ui/base/colors) for more details.

```html
<div class="steps steps-green">...</div>
```

The example below demonstrates a progress tracker with two different color schemes.

<Example>
<div class="steps steps-green">
  <a href="#" class="step-item">Step 1</a>
  <a href="#" class="step-item">Step 2</a>
  <a href="#" class="step-item active">Step 3</a>
  <span href="#" class="step-item">Step 4</span>
</div>
<div class="steps steps-red">
  <a href="#" class="step-item">Step 1</a>
  <a href="#" class="step-item">Step 2</a>
  <a href="#" class="step-item active">Step 3</a>
  <span href="#" class="step-item">Step 4</span>
</div>
</Example>

## Steps without title

For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.

<Example>
<div class="steps">
  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description"></a>
  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description"></a>
  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description"></a>
  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description"></span>
</div>
</Example>

## Steps with numbers

Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.

```html
<div class="steps steps-counter">...</div>
```

The example below demonstrates a progress tracker with numbers and a different color scheme.

<Example>
<div class="steps steps-counter">
  <a href="#" class="step-item"></a>
  <a href="#" class="step-item active"></a>
  <span href="#" class="step-item"></span>
  <span href="#" class="step-item"></span>
  <span href="#" class="step-item"></span>
</div>
</Example>

## 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 colours.
- A completed step and a pending one must differ in more than colour - 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.

## SCSS variables

Use these SCSS variables to customize steps. The default values are:

<CodeDocs name="steps-variables" file="core/scss/_variables.scss" />