Accordion Alerts / Banner Buttons Card Collection Combo box Forms Language Layout List Navigation Other Search Social Summary box

Step Indicator (step_indicator)

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

🔗 External documentation.

ID Label Description Schema
completed_items Completed Items An array of completed patterns.
in_progress_items In Progress Items An array of in progress items.
heading_level Heading level 
                        type: integer
enum:
    - 2
    - 3
    - 4
    - 5
    - 6
label Label Label of the step indicator. 
                        type: string

                      
            id: step_indicator
label: 'Step Indicator'
description: 'A step indicator updates users on their progress through a multi-step process.'
group: List
homepage: 'https://designsystem.digital.gov/components/step-indicator/'
variants:
    default:
        id: default
        label: Default
    no_labels:
        id: no_labels
        label: 'No labels'
        description: 'Don’t show step labels.'
    counters:
        id: counters
        label: Counters
        description: 'Show step counters.'
    counters_sm:
        id: counters_sm
        label: 'Counters - Small'
        description: 'Show small step counters.'
    center:
        id: center
        label: Center
        description: 'Center counters and labels in each step.'
slots:
    completed_items:
        id: completed_items
        label: 'Completed Items'
        description: 'An array of completed patterns.'
    in_progress_items:
        id: in_progress_items
        label: 'In Progress Items'
        description: 'An array of in progress items.'
props:
    heading_level:
        id: heading_level
        label: 'Heading level'
        schema:
            type: integer
            enum:
                - 2
                - 3
                - 4
                - 5
                - 6
    label:
        id: label
        label: Label
        description: 'Label of the step indicator.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': step_indicator
            completed_items:
                - First
                - Second
                - Third
            in_progress_items:
                - Fourth
                - Fifth
            heading_level: 4
            label: 'Support documents'

Default ( default )

  1. First Completed
  2. Second Completed
  3. Third Completed
  4. Fourth Not completed
  5. Fifth Not completed

Step 3 of 5 Support documents

<div aria-label="progress" class="usa-step-indicator"> <ol class="usa-step-indicator__segments"> <li class="usa-step-indicator__segment usa-step-indicator__segment--complete"> <span class="usa-step-indicator__segment-label"> First <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"> Second <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"> Third <span class="usa-sr-only">Completed</span> </span> </li> <li class="usa-step-indicator__segment"> <span class="usa-step-indicator__segment-label"> Fourth <span class="usa-sr-only">Not completed</span> </span> </li> <li class="usa-step-indicator__segment"> <span class="usa-step-indicator__segment-label"> Fifth <span class="usa-sr-only">Not completed</span> </span> </li> </ol> <div class="usa-step-indicator__header"> <h4 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">Support documents</span> </h4> </div> </div>

No labels ( no_labels )

Don’t show step labels.

  1. First Completed
  2. Second Completed
  3. Third Completed
  4. Fourth Not completed
  5. Fifth Not completed

Step 3 of 5 Support documents

<div aria-label="progress" class="usa-step-indicator--no-labels usa-step-indicator"> <ol class="usa-step-indicator__segments"> <li class="usa-step-indicator__segment usa-step-indicator__segment--complete"> <span class="usa-step-indicator__segment-label"> First <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"> Second <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"> Third <span class="usa-sr-only">Completed</span> </span> </li> <li class="usa-step-indicator__segment"> <span class="usa-step-indicator__segment-label"> Fourth <span class="usa-sr-only">Not completed</span> </span> </li> <li class="usa-step-indicator__segment"> <span class="usa-step-indicator__segment-label"> Fifth <span class="usa-sr-only">Not completed</span> </span> </li> </ol> <div class="usa-step-indicator__header"> <h4 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">Support documents</span> </h4> </div> </div>

Counters ( counters )

Show step counters.

  1. First Completed
  2. Second Completed
  3. Third Completed
  4. Fourth Not completed
  5. Fifth Not completed

Step 3 of 5 Support documents

<div aria-label="progress" class="usa-step-indicator--counters usa-step-indicator"> <ol class="usa-step-indicator__segments"> <li class="usa-step-indicator__segment usa-step-indicator__segment--complete"> <span class="usa-step-indicator__segment-label"> First <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"> Second <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"> Third <span class="usa-sr-only">Completed</span> </span> </li> <li class="usa-step-indicator__segment"> <span class="usa-step-indicator__segment-label"> Fourth <span class="usa-sr-only">Not completed</span> </span> </li> <li class="usa-step-indicator__segment"> <span class="usa-step-indicator__segment-label"> Fifth <span class="usa-sr-only">Not completed</span> </span> </li> </ol> <div class="usa-step-indicator__header"> <h4 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">Support documents</span> </h4> </div> </div>

Counters - Small ( counters_sm )

Show small step counters.

  1. First Completed
  2. Second Completed
  3. Third Completed
  4. Fourth Not completed
  5. Fifth Not completed

Step 3 of 5 Support documents

<div aria-label="progress" class="usa-step-indicator--counters-sm usa-step-indicator"> <ol class="usa-step-indicator__segments"> <li class="usa-step-indicator__segment usa-step-indicator__segment--complete"> <span class="usa-step-indicator__segment-label"> First <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"> Second <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"> Third <span class="usa-sr-only">Completed</span> </span> </li> <li class="usa-step-indicator__segment"> <span class="usa-step-indicator__segment-label"> Fourth <span class="usa-sr-only">Not completed</span> </span> </li> <li class="usa-step-indicator__segment"> <span class="usa-step-indicator__segment-label"> Fifth <span class="usa-sr-only">Not completed</span> </span> </li> </ol> <div class="usa-step-indicator__header"> <h4 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">Support documents</span> </h4> </div> </div>

Center ( center )

Center counters and labels in each step.

  1. First Completed
  2. Second Completed
  3. Third Completed
  4. Fourth Not completed
  5. Fifth Not completed

Step 3 of 5 Support documents

<div aria-label="progress" class="usa-step-indicator--center usa-step-indicator"> <ol class="usa-step-indicator__segments"> <li class="usa-step-indicator__segment usa-step-indicator__segment--complete"> <span class="usa-step-indicator__segment-label"> First <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"> Second <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"> Third <span class="usa-sr-only">Completed</span> </span> </li> <li class="usa-step-indicator__segment"> <span class="usa-step-indicator__segment-label"> Fourth <span class="usa-sr-only">Not completed</span> </span> </li> <li class="usa-step-indicator__segment"> <span class="usa-step-indicator__segment-label"> Fifth <span class="usa-sr-only">Not completed</span> </span> </li> </ol> <div class="usa-step-indicator__header"> <h4 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">Support documents</span> </h4> </div> </div>