---
title: Step indicator (Vanilla) - USWDS + Tailwind
description: Show progress through a multi-step process with step indicators,
  labels, and counters.
---

# Step indicator

Show progress through a multi-step process with step indicators, labels, and counters.

## Examples

### Default

```html
<div aria-label="Progress" class="@container">
<ol class="flex space-x-0.5 [counter-reset:usa-step-indicator]">
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 border-t-blue-warm-80v">
    <span class="hidden leading-none @tablet:block text-blue-warm-80v">Personal information</span>
    <span class="sr-only">complete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 border-t-blue-warm-80v">
    <span class="hidden leading-none @tablet:block text-blue-warm-80v">Household status</span>
    <span class="sr-only">complete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 border-t-blue-60v" aria-current="step">
    <span class="hidden leading-none @tablet:block text-blue-60v font-bold">Supporting documents</span>
    <span class="sr-only">current</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 border-t-gray-40">
    <span class="hidden leading-none @tablet:block text-gray-cool-60">Signature</span>
    <span class="sr-only">incomplete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 border-t-gray-40">
    <span class="hidden leading-none @tablet:block text-gray-cool-60">Review and submit</span>
    <span class="sr-only">incomplete</span>
  </li>
</ol>
<div class="mt-4">
  <span class="text-xl">
    <span class="sr-only">Step</span>
    <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">3</span>
    <span class="text-blue-60v">of 5</span>
  </span>
  <span class="font-bold pl-2 text-2xl">Supporting documents</span>
</div>
</div>
```

### Centered

```html
<div aria-label="Progress" class="@container">
<ol class="flex space-x-0.5 [counter-reset:usa-step-indicator]">
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full px-2 border-t-blue-warm-80v">
    <span class="hidden leading-none @tablet:block text-center text-blue-warm-80v">Personal information</span>
    <span class="sr-only">complete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full px-2 border-t-blue-warm-80v">
    <span class="hidden leading-none @tablet:block text-center text-blue-warm-80v">Household status</span>
    <span class="sr-only">complete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full px-2 border-t-blue-60v" aria-current="step">
    <span class="hidden leading-none @tablet:block text-center text-blue-60v font-bold">Supporting documents</span>
    <span class="sr-only">current</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full px-2 border-t-gray-40">
    <span class="hidden leading-none @tablet:block text-center text-gray-cool-60">Signature</span>
    <span class="sr-only">incomplete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full px-2 border-t-gray-40">
    <span class="hidden leading-none @tablet:block text-center text-gray-cool-60">Review and submit</span>
    <span class="sr-only">incomplete</span>
  </li>
</ol>
<div class="mt-4">
  <span class="text-xl">
    <span class="sr-only">Step</span>
    <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">3</span>
    <span class="text-blue-60v">of 5</span>
  </span>
  <span class="font-bold pl-2 text-2xl">Supporting documents</span>
</div>
</div>
```

### Counters

```html
<div aria-label="Progress" class="@container">
<ol class="flex space-x-0.5 [counter-reset:usa-step-indicator]">
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 relative @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent border-t-blue-warm-80v">
    <div class="hidden @tablet:flex rounded-full items-center justify-center absolute outline-white outline-4 before:[content:counter(usa-step-indicator)] font-bold size-10 -top-6 bg-blue-warm-80v text-white"></div>
    <span class="hidden leading-none @tablet:block text-blue-warm-80v">Personal information</span>
    <span class="sr-only">complete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 relative @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent border-t-blue-warm-80v">
    <div class="hidden @tablet:flex rounded-full items-center justify-center absolute outline-white outline-4 before:[content:counter(usa-step-indicator)] font-bold size-10 -top-6 bg-blue-warm-80v text-white"></div>
    <span class="hidden leading-none @tablet:block text-blue-warm-80v">Household status</span>
    <span class="sr-only">complete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 relative @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent border-t-blue-60v" aria-current="step">
    <div class="hidden @tablet:flex rounded-full items-center justify-center absolute outline-white outline-4 before:[content:counter(usa-step-indicator)] font-bold size-10 -top-6 bg-blue-60v text-white"></div>
    <span class="hidden leading-none @tablet:block text-blue-60v font-bold">Supporting documents</span>
    <span class="sr-only">current</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 relative @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent border-t-gray-40">
    <div class="hidden @tablet:flex rounded-full items-center justify-center absolute outline-white outline-4 before:[content:counter(usa-step-indicator)] font-bold size-10 -top-6 bg-white border-4 border-gray-40 text-gray-60"></div>
    <span class="hidden leading-none @tablet:block text-gray-cool-60">Signature</span>
    <span class="sr-only">incomplete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 relative @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent border-t-gray-40">
    <div class="hidden @tablet:flex rounded-full items-center justify-center absolute outline-white outline-4 before:[content:counter(usa-step-indicator)] font-bold size-10 -top-6 bg-white border-4 border-gray-40 text-gray-60"></div>
    <span class="hidden leading-none @tablet:block text-gray-cool-60">Review and submit</span>
    <span class="sr-only">incomplete</span>
  </li>
</ol>
<div class="mt-4">
  <span class="text-xl">
    <span class="sr-only">Step</span>
    <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">3</span>
    <span class="text-blue-60v">of 5</span>
  </span>
  <span class="font-bold pl-2 text-2xl">Supporting documents</span>
</div>
</div>
```

### Counters Small

```html
<div aria-label="Progress" class="@container">
<ol class="flex space-x-0.5 [counter-reset:usa-step-indicator]">
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 relative @tablet:pt-4 @tablet:mt-2 @tablet:last:border-t-transparent border-t-blue-warm-80v">
    <div class="hidden @tablet:flex rounded-full items-center justify-center absolute outline-white outline-4 before:[content:counter(usa-step-indicator)] font-bold size-6 -top-4 bg-blue-warm-80v text-white"></div>
    <span class="hidden leading-none @tablet:block text-blue-warm-80v">Personal information</span>
    <span class="sr-only">complete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 relative @tablet:pt-4 @tablet:mt-2 @tablet:last:border-t-transparent border-t-blue-warm-80v">
    <div class="hidden @tablet:flex rounded-full items-center justify-center absolute outline-white outline-4 before:[content:counter(usa-step-indicator)] font-bold size-6 -top-4 bg-blue-warm-80v text-white"></div>
    <span class="hidden leading-none @tablet:block text-blue-warm-80v">Household status</span>
    <span class="sr-only">complete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 relative @tablet:pt-4 @tablet:mt-2 @tablet:last:border-t-transparent border-t-blue-60v" aria-current="step">
    <div class="hidden @tablet:flex rounded-full items-center justify-center absolute outline-white outline-4 before:[content:counter(usa-step-indicator)] font-bold size-6 -top-4 bg-blue-60v text-white"></div>
    <span class="hidden leading-none @tablet:block text-blue-60v font-bold">Supporting documents</span>
    <span class="sr-only">current</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 relative @tablet:pt-4 @tablet:mt-2 @tablet:last:border-t-transparent border-t-gray-40">
    <div class="hidden @tablet:flex rounded-full items-center justify-center absolute outline-white outline-4 before:[content:counter(usa-step-indicator)] font-bold size-6 -top-4 bg-white border-4 border-gray-40 text-gray-60"></div>
    <span class="hidden leading-none @tablet:block text-gray-cool-60">Signature</span>
    <span class="sr-only">incomplete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full pr-8 relative @tablet:pt-4 @tablet:mt-2 @tablet:last:border-t-transparent border-t-gray-40">
    <div class="hidden @tablet:flex rounded-full items-center justify-center absolute outline-white outline-4 before:[content:counter(usa-step-indicator)] font-bold size-6 -top-4 bg-white border-4 border-gray-40 text-gray-60"></div>
    <span class="hidden leading-none @tablet:block text-gray-cool-60">Review and submit</span>
    <span class="sr-only">incomplete</span>
  </li>
</ol>
<div class="mt-4">
  <span class="text-xl">
    <span class="sr-only">Step</span>
    <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">3</span>
    <span class="text-blue-60v">of 5</span>
  </span>
  <span class="font-bold pl-2 text-2xl">Supporting documents</span>
</div>
</div>
```

### No Labels

```html
<div aria-label="Progress" class="@container">
<ol class="flex space-x-0.5 [counter-reset:usa-step-indicator]">
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full border-t-blue-warm-80v">
    <span class="hidden leading-none @tablet:hidden text-blue-warm-80v">Personal information</span>
    <span class="sr-only">complete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full border-t-blue-warm-80v">
    <span class="hidden leading-none @tablet:hidden text-blue-warm-80v">Household status</span>
    <span class="sr-only">complete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full border-t-blue-60v" aria-current="step">
    <span class="hidden leading-none @tablet:hidden text-blue-60v font-bold">Supporting documents</span>
    <span class="sr-only">current</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full border-t-gray-40">
    <span class="hidden leading-none @tablet:hidden text-gray-cool-60">Signature</span>
    <span class="sr-only">incomplete</span>
  </li>
  <li class="[counter-increment:usa-step-indicator] border-t-8 pt-2 w-full border-t-gray-40">
    <span class="hidden leading-none @tablet:hidden text-gray-cool-60">Review and submit</span>
    <span class="sr-only">incomplete</span>
  </li>
</ol>
<div class="mt-4">
  <span class="text-xl">
    <span class="sr-only">Step</span>
    <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">3</span>
    <span class="text-blue-60v">of 5</span>
  </span>
  <span class="font-bold pl-2 text-2xl">Supporting documents</span>
</div>
</div>
```

## Component API

Use an ordered list for the steps. Set `aria-current="step"` on the current list item, and include text for every step even when the visual labels are hidden. The summary identifies the current step and total number of steps.