Skip to main content

Step indicators

Step indicators are used to represent an ordered, sequential process. They can be used as navigation, or just as a visual indicator for where a user is within a process.

Default

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Example HTML usage: 
<!-- Default step indicator-->
<div class="usa-step-indicator" aria-label="progress">
  <ol class="usa-step-indicator__segments">
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Personal information <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Household status <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--current"
      aria-current="true"
    >
      <span class="usa-step-indicator__segment-label"
        >Supporting documents
      </span>
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Signature <span class="usa-sr-only">not completed</span></span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Review and submit <span class="usa-sr-only">not completed</span></span
      >
    </li>
  </ol>
  <div class="usa-step-indicator__header">
    <h2 class="usa-step-indicator__heading">
      <span class="usa-step-indicator__heading-counter">
        <span class="usa-sr-only">Step</span>
        <span class="usa-step-indicator__current-step">3</span>
        <span class="usa-step-indicator__total-steps">of 5</span>
      </span>
      <span class="usa-step-indicator__heading-text">Supporting documents</span>
    </h2>
  </div>
</div>

No label

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Example HTML usage: 
<!-- No label step indicator-->
<div
  class="usa-step-indicator usa-step-indicator--no-labels"
  aria-label="progress"
>
  <ol class="usa-step-indicator__segments">
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Personal information <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Household status <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--current"
    >
      <span class="usa-step-indicator__segment-label"
        >Supporting documents
      </span>
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Signature <span class="usa-sr-only">not completed</span></span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Review and submit <span class="usa-sr-only">not completed</span></span
      >
    </li>
  </ol>
  <div class="usa-step-indicator__header">
    <h2 class="usa-step-indicator__heading">
      <span class="usa-step-indicator__heading-counter">
        <span class="usa-sr-only">Step</span>
        <span class="usa-step-indicator__current-step">3</span>
        <span class="usa-step-indicator__total-steps">of 5</span>
      </span>
      <span class="usa-step-indicator__heading-text">Supporting documents</span>
    </h2>
  </div>
</div>

Centered

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Example HTML usage: 
<!-- Centered step indicator-->
<div
  class="usa-step-indicator usa-step-indicator--center"
  aria-label="progress"
>
  <ol class="usa-step-indicator__segments">
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Personal information <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Household status <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--current"
      aria-current="true"
    >
      <span class="usa-step-indicator__segment-label"
        >Supporting documents
      </span>
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Signature <span class="usa-sr-only">not completed</span></span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Review and submit <span class="usa-sr-only">not completed</span></span
      >
    </li>
  </ol>
  <div class="usa-step-indicator__header">
    <h2 class="usa-step-indicator__heading">
      <span class="usa-step-indicator__heading-counter">
        <span class="usa-sr-only">Step</span>
        <span class="usa-step-indicator__current-step">3</span>
        <span class="usa-step-indicator__total-steps">of 5</span>
      </span>
      <span class="usa-step-indicator__heading-text">Supporting documents</span>
    </h2>
  </div>
</div>

Counters

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Example HTML usage: 
<!-- Counters step indicator-->
<div
  class="usa-step-indicator usa-step-indicator--counters"
  aria-label="progress"
>
  <ol class="usa-step-indicator__segments">
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Personal information <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Household status <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--current"
      aria-current="true"
    >
      <span class="usa-step-indicator__segment-label"
        >Supporting documents
      </span>
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Signature <span class="usa-sr-only">not completed</span></span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Review and submit <span class="usa-sr-only">not completed</span></span
      >
    </li>
  </ol>
  <div class="usa-step-indicator__header">
    <h2 class="usa-step-indicator__heading">
      <span class="usa-step-indicator__heading-counter">
        <span class="usa-sr-only">Step</span>
        <span class="usa-step-indicator__current-step">3</span>
        <span class="usa-step-indicator__total-steps">of 5</span>
      </span>
      <span class="usa-step-indicator__heading-text">Supporting documents</span>
    </h2>
  </div>
</div>

Small counters

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Example HTML usage: 
<!-- Small counters step indicator-->
<div
  class="usa-step-indicator usa-step-indicator--counters-sm"
  aria-label="progress"
>
  <ol class="usa-step-indicator__segments">
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Personal information <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Household status <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--current"
      aria-current="true"
    >
      <span class="usa-step-indicator__segment-label"
        >Supporting documents
      </span>
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Signature <span class="usa-sr-only">not completed</span></span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Review and submit <span class="usa-sr-only">not completed</span></span
      >
    </li>
  </ol>
  <div class="usa-step-indicator__header">
    <h2 class="usa-step-indicator__heading">
      <span class="usa-step-indicator__heading-counter">
        <span class="usa-sr-only">Step</span>
        <span class="usa-step-indicator__current-step">3</span>
        <span class="usa-step-indicator__total-steps">of 5</span>
      </span>
      <span class="usa-step-indicator__heading-text">Supporting documents</span>
    </h2>
  </div>
</div>