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
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

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

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

Edit this page in GitHub (Permissions required)
Last updated: May 07, 2025