Skip to main content
USWDS + Tailwind

Step indicator

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

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. complete
  2. complete
  3. current
  4. incomplete
  5. incomplete
Step 3 of 5 Supporting documents
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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. complete
  2. complete
  3. current
  4. incomplete
  5. incomplete
Step 3 of 5 Supporting documents
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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. complete
  2. complete
  3. current
  4. incomplete
  5. incomplete
Step 3 of 5 Supporting documents
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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. complete
  2. complete
  3. current
  4. incomplete
  5. incomplete
Step 3 of 5 Supporting documents
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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. complete
  2. complete
  3. current
  4. incomplete
  5. incomplete
Step 3 of 5 Supporting documents
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.