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

Use: Deployed
A segmented progress bar updates users on their progress through a multi-step process.

Examples

View va-segmented-progress-bar in Storybook

Usage

When to use a segmented progress bar

  • Step indicator for forms: When you need the user to complete more than one step in a process, usually completing a form.
  • Multiple steps and screens for a single interaction: When you need to communicate which step a user is currently on as they move through a multi-step process for a single interaction.

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.

Behavior

  • The segments in the progress bar should equal the total number of steps in the process or form.
  • The segment corresponding to a previously completed step should be primary blue as should the current step. Upcoming steps are gray-lighter.

Placement

  • The Segmented progress bar should appear directly below the h1 title of the process and before the form itself.
  • The current step number and title should appear below the step segments.

Code usage

Attributes and Properties

Property Attribute Type Default Description
current current number The current segment in progress
enableAnalytics enable-analytics boolean false Whether or not an analytics event will be fired.
label label string An override for the default aria label.
total total number The total number of segments in the progress bar

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

  • The web component will ensure that the aria label, valuenow, valuemin, valuemax, and valuetext are all appropriately set if the correct attributes are passed.
Edit this page in GitHub (Permissions required)
Last updated: Jun 01, 2022