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

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 progress bar should appear directly below the h1 title of the process and before the form itself.

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

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.