Skip to main content

An official website of the United States government

Here's how you know

Design System

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

What's new?

View code on GitHub

Theme:

Design system switcher

Version:

Design system switcher

Step List

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.

GithubStorybookSketch

Examples

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.

View interactive React examples in Storybook

Code

React

See Storybook "Step List" page for React documentation.

Style customization

The following CSS variables can be overridden to customize StepList patterns:

CSS variables for steplist
VariableDefault Core Theme Value
--steplist__colorhex value: #5a5a5a--color-gray-dark
--steplist__color--currenthex value: #0071bc--color-primary
--steplist__background-color--currenthex value: #0071bc--color-primary
--steplist-step__colorhex value: #5a5a5a--color-gray-dark
--steplist-step__border-colorhex value: #d9d9d9--color-border
--steplist-step__border-color--defaulthex value: #5a5a5a--color-gray-dark
--steplist-step__color--currenthex value: #ffffff--color-white
--steplist-step__color--completedhex value: #262626--color-base
--steplist-step__background-color--completedhex value: #262626--color-base

Component maturity

This component meets 70% of our maturity criteria.

Incomplete criteria

  • Incomplete

    WCAG 2.1 Level AA Conformance: All Axe checks for WCAG AA compliance have passed.

  • Incomplete

    Keyboard navigation: Component is fully navigable with a keyboard.

  • Incomplete

    Spanish translations: Includes Spanish translations for default text content.

What does this mean?

Each component is tested against the following items to gauge the component's maturity. When using incomplete components, consider the unmet criteria as applied to your product.

For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.

On this page

Have ideas?