An official website of the United States government
Here's how you know
Official websites use .gov A .gov website belongs to an official government organization in the United States.
Secure .gov websites use HTTPS A lock () or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.
An official website of the United States government
Here's how you know
Official websites use .gov A .gov website belongs to an official government organization in the United States.
Secure .gov websites use HTTPS A lock () or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.
A step list represents a user's progression through an application or multi-page form. It serves as a table of contents and a way to quickly see where they are and what they should be working on next.
The StepList component is the preferred method for building a step list, since it handles all the state logic necessary to produce its markup. A step is represented by an object with text, progress, and routing information and can optionally include an array of substeps as well as a description.
Loading
Code
React
See Storybook for React guidance of this component.
Web Component
See Storybook for Web Component guidance of this component.
Style customization
The following CSS variables can be overridden to customize StepList patterns:
Figma
Storybook