Components

Progress bar - Segmented

Use: Deployed

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

Examples

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.

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.

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.

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.

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

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.

The web component will ensure that the aria label, valuenow, valuemin, valuemax, and valuetext are all appropriately set if the correct attributes are passed.