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
View va-segmented-progress-bar v3 default in StorybookStep 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
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
component-library-analytics
The event used to track usage of the component. This is emitted when the
component renders and enableAnalytics is true.