Skip to main content
Logo USWDS + Tailwind

Step indicator

A step indicator updates users on their progress through a multi-step process.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. not completed
  2. not completed
  4. completed
  5. completed

Step 3 of 5 Supporting documents

Twig 
{% set current_step = step_indicator.current_step  %}


<div aria-label="progress" class="@container">
  <ol class="flex space-x-0.5">
    {% for step in step_indicator.steps %}


    <li
      class="border-t-8 pr-8 pt-2 w-full {{ loop.index < current_step ? 'border-t-blue-warm-80v' : loop.index > current_step ? 'border-t-gray-40' : 'border-t-blue-60v' }}"
      {{ loop.index == current_step ? "aria-current='true'" }}
      >
      <span class="hidden @tablet:block leading-none {{ loop.index < current_step ? 'text-blue-warm-80v' : loop.index > current_step ? 'text-gray-cool-60' : 'text-blue-60v font-bold' }}">{{step.label}}</span>
      {% if loop.index != current_step %}
      <span class="sr-only">{{ loop.index < current_step ? 'not completed' : 'completed'}}</span>
      {% endif %}
    </li>


    {% endfor %}
  </ol>


  <div class="mt-4 @tablet:mt-8">
    <h4 class="text-2xl text-gray-90">
      <span>
        <span class="sr-only">Step</span>
        <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">{{ current_step }}</span>
        <span class="text-blue-60v">of {{ step_indicator.steps.length }}</span>
      </span>
      <span class="font-bold pl-2">{{ step_indicator.steps[current_step - 1].label }}</span>
    </h4>


  </div>
</div>

Centered

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. not completed
  2. not completed
  4. completed
  5. completed

Step 3 of 5 Supporting documents

Twig 
{% set current_step = step_indicator.current_step  %}


<div aria-label="progress" class="@container">
  <ol class="flex space-x-0.5">
    {% for step in step_indicator.steps %}


    <li
      class="border-t-8 px-2 pt-2 w-full text-center {{ loop.index < current_step ? 'border-t-blue-warm-80v' : loop.index > current_step ? 'border-t-gray-40' : 'border-t-blue-60v' }}"
      {{ loop.index == current_step ? "aria-current='true'" }}
      >
      <span class="hidden @tablet:block leading-none {{ loop.index < current_step ? 'text-blue-warm-80v' : loop.index > current_step ? 'text-gray-cool-60' : 'text-blue-60v font-bold' }}">{{step.label}}</span>
      {% if loop.index != current_step %}
      <span class="sr-only">{{ loop.index < current_step ? 'not completed' : 'completed'}}</span>
      {% endif %}
    </li>


    {% endfor %}
  </ol>


  <div class="mt-4 @tablet:mt-8">
    <h4 class="text-2xl text-gray-90">
      <span>
        <span class="sr-only">Step</span>
        <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">{{ current_step }}</span>
        <span class="text-blue-60v">of {{ step_indicator.steps.length }}</span>
      </span>
      <span class="font-bold pl-2">{{ step_indicator.steps[current_step - 1].label }}</span>
    </h4>


  </div>
</div>

Counters

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. not completed
  2. not completed
  4. completed
  5. completed

Step 3 of 5 Supporting documents

Twig 
{% set current_step = step_indicator.current_step  %}


<div aria-label="progress" class="@container">
  <ol class="flex space-x-0.5">
    {% for step in step_indicator.steps %}


    <li
      class="relative border-t-8 pr-8 pt-2 w-full @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent
      {{ loop.index < current_step ? 'border-t-blue-warm-80v' : loop.index > current_step ? 'border-t-gray-40' : 'border-t-blue-60v' }}"
      {{ loop.index == current_step ? "aria-current='true'" }}
      >
      <div class="hidden @tablet:flex size-10 rounded-full items-center justify-center absolute -top-6 outline outline-white outline-4 {{ loop.index < current_step ? 'bg-blue-warm-80v' : loop.index > current_step ? 'bg-white border-4 border-gray-40' : 'bg-blue-60v' }}">
        <span class="font-bold {{ loop.index <= current_step ? 'text-white' : 'text-gray-60' }}">{{- loop.index -}}</span>
      </div>
      <span class="hidden @tablet:block leading-none {{ loop.index < current_step ? 'text-blue-warm-80v' : loop.index > current_step ? 'text-gray-cool-60' : 'text-blue-60v font-bold' }}">{{step.label}}</span>
      {% if loop.index != current_step %}
      <span class="sr-only">{{ loop.index < current_step ? 'not completed' : 'completed'}}</span>
      {% endif %}
    </li>


    {% endfor %}
  </ol>


  <div class="mt-4 @tablet:mt-8">
    <h4 class="text-2xl text-gray-90">
      <span>
        <span class="sr-only">Step</span>
        <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">{{ current_step }}</span>
        <span class="text-blue-60v">of {{ step_indicator.steps.length }}</span>
      </span>
      <span class="font-bold pl-2">{{ step_indicator.steps[current_step - 1].label }}</span>
    </h4>


  </div>
</div>

Counters Small

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. not completed
  2. not completed
  4. completed
  5. completed

Step 3 of 5 Supporting documents

Twig 
{% set current_step = step_indicator.current_step  %}


<div aria-label="progress" class="@container">
  <ol class="flex space-x-0.5">
    {% for step in step_indicator.steps %}


    <li
      class="relative border-t-8 pr-8 pt-2 w-full @tablet:mt-2 @tablet:pt-4 @tablet:last:border-t-transparent
      {{ loop.index < current_step ? 'border-t-blue-warm-80v' : loop.index > current_step ? 'border-t-gray-40' : 'border-t-blue-60v' }}"
      {{ loop.index == current_step ? "aria-current='true'" }}
      >
      <div class="hidden @tablet:flex size-6 rounded-full items-center justify-center absolute -top-4 outline outline-white outline-4 {{ loop.index < current_step ? 'bg-blue-warm-80v' : loop.index > current_step ? 'bg-white border-4 border-gray-40' : 'bg-blue-60v' }}">
        <span class="font-bold {{ loop.index <= current_step ? 'text-white' : 'text-gray-60' }}">{{- loop.index -}}</span>
      </div>
      <span class="hidden @tablet:block leading-none {{ loop.index < current_step ? 'text-blue-warm-80v' : loop.index > current_step ? 'text-gray-cool-60' : 'text-blue-60v font-bold' }}">{{step.label}}</span>
      {% if loop.index != current_step %}
      <span class="sr-only">{{ loop.index < current_step ? 'not completed' : 'completed'}}</span>
      {% endif %}
    </li>


    {% endfor %}
  </ol>


  <div class="mt-4 @tablet:mt-8">
    <h4 class="text-2xl text-gray-90">
      <span>
        <span class="sr-only">Step</span>
        <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">{{ current_step }}</span>
        <span class="text-blue-60v">of {{ step_indicator.steps.length }}</span>
      </span>
      <span class="font-bold pl-2">{{ step_indicator.steps[current_step - 1].label }}</span>
    </h4>


  </div>
</div>

No Labels

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Step 3 of 5 Supporting documents

Twig 
{% set current_step = step_indicator.current_step  %}


<div aria-label="progress">
  <ol class="flex space-x-0.5">
    {% for step in step_indicator.steps %}


    <li
      class="border-t-8 pr-8 pt-2 w-full {{ loop.index < current_step ? 'border-t-blue-warm-80v' : loop.index > current_step ? 'border-t-gray-40' : 'border-t-blue-60v' }}"
      {{ loop.index == current_step ? "aria-current='true'" }}
      >
    </li>


    {% endfor %}
  </ol>


  <div class="mt-4">
    <h4 class="text-2xl text-gray-90">
      <span>
        <span class="sr-only">Step</span>
        <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">{{ current_step }}</span>
        <span class="text-blue-60v">of {{ step_indicator.steps.length }}</span>
      </span>
      <span class="font-bold pl-2">{{ step_indicator.steps[current_step - 1].label }}</span>
    </h4>


  </div>
</div>