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.