Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Progress bar - Segmented

Also known as: Step indicator

use: deployed USWDS v3 Web
A segmented progress bar updates users on their progress through a multi-step process.

Examples

Default

View va-segmented-progress-bar v3 default in Storybook

Step Labels

View va-segmented-progress-bar step labels in Storybook

Centered Step Labels

View va-segmented-progress-bar vcentered step labels in Storybook

Counters

View va-segmented-progress-bar counters in Storybook

Small Counters

View va-segmented-progress-bar small counters in Storybook

Centered Counters

View va-segmented-progress-bar centered counters in Storybook

Centered Small Counters

View va-segmented-progress-bar centered small counters in Storybook

Custom Header Level

View va-segmented-progress-bar custom header level in Storybook

Usage

Additional guidance for VA

The segmented progress bar is primarily used in multi-step form flows to show users their progress through the application process.

For additional guidance on using progress bars in form flows, see Form templates and Form accessibility guidelines.

When to consider something else

  • Tracking progress over an extended period of time: If the steps in a process span multiple interactions or an extended period of time then use the Process list component.
  • Steps can be completed in any order: If steps can be completed in any order consider the Master/Detail screen pattern and provide status as to when each section is complete and when the overall process is complete.
  • Checklist: The progress bar is not intended to handle a checklist.

Placement

  • The progress bar should appear directly below the h1 title of the process and before the form itself.

Code usage

Web

Attributes and Properties

Property Attribute Type Default Description centeredLabels centered-labels boolean

Whether or not to center the step labels

 counters counters "default" | "small"

Show number counters for each step

 current current number

The current segment in progress

 enableAnalytics enable-analytics boolean false

Whether or not an analytics event will be fired.

 headerLevel header-level number 4

Header level for button wrapper. Must be between 1 and 6

 headingText heading-text string

Text of current step

 label label string

An override for the default aria label.

 labels labels string

String containing a list of step labels delimited by a semi-colon. Example: "Step 1;Step 2;Step 3"

 progressTerm progress-term string 'Step'

The term used to indicate the current progress for the heading “[progressTerm] 2 of 5”. (Screen reader only)

 total total number

The total number of segments in the progress bar

 useDiv use-div boolean

When true, this makes the segmented-progress-bar use a div instead of a heading

Events

Name Description component-library-analytics The event used to track usage of the component. This is emitted when the component renders and enableAnalytics is true.

Accessibility considerations

Provide feedback

Share your feedback, report issues, or suggest improvements for the Progress bar - Segmented component. Your input helps us make the design system better for everyone.

Edit this page in GitHub (Permissions required)
Last updated: Sep 18, 2025