<div class="usa-step-indicator usa-step-indicator--counters 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>

There are no notes for this item.

<div class="usa-step-indicator{% if variant %} usa-step-indicator--{{ variant }}{% endif %}{% if centered %} usa-step-indicator--center{% endif %}" aria-label="progress">
  <ol class="usa-step-indicator__segments"{% if noLabels %} aria-hidden="true"{% endif %}>{% for step in steps %}
    <li class="usa-step-indicator__segment{% if step.status == "complete" %} usa-step-indicator__segment--complete{% endif %}{% if step.status == "current" %} usa-step-indicator__segment--current{% endif %}"{% if step.status == "current" and showLabels %} aria-current="true"{% endif %}>{% if step.label %}
      <span class="usa-step-indicator__segment-label">{{ step.label }} {% if step.status == "complete" %}<span class="usa-sr-only">completed</span>{% endif %}{% if step.status == "incomplete" %}<span class="usa-sr-only">not completed</span>{% endif %}</span>
    {% endif %}</li>{% endfor %}
  </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">{{ currentStep }}</span>
        <span class="usa-step-indicator__total-steps">of {{ steps.length }}</span>
      </span>
      <span class="usa-step-indicator__heading-text">Supporting documents</span>
    </h2>
  </div>
</div>
package:
  name: uswds
  version: 2.9.0
uswds:
  path: ../../dist
showLabels: true
currentStep: 3
steps:
  - step: null
    status: complete
    label: Personal information
  - step: null
    status: complete
    label: Household status
  - step: null
    status: current
    label: Supporting documents
  - step: null
    status: incomplete
    label: Signature
  - step: null
    status: incomplete
    label: Review and submit
heading: Centered and counters
centered: true
variant: counters