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 - v1

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 (v3 only)
`counters`	`counters`	`"default" \| "small"`		Show number counters for each step (v3 only)
`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 (v3 only)
`headingText`	`heading-text`	`string`		Text of current step (v3 only)
`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 (v3 only) 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 (v3 only)
`uswds`	`uswds`	`boolean`		Whether or not the component will use USWDS v3 styling.

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.