Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

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.

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.

Loading

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

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

Accessibility

  • Color

    Meets AA color contrast standards for accessibility and color blindness.
    Complete
  • Forced Colors Mode (FCM)

    While using FCM the components text is legible and improves readability.
    Complete
  • WCAG 2.1 Level AA Conformance

    All Axe checks for WCAG AA compliance have passed.
    Incomplete
  • Screen readers

    VoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.
    Complete
  • Keyboard navigation

    Component is fully navigable with a keyboard.
    Incomplete

Code

  • Storybook

    Component has stories to cover all defined props.
    Complete
  • Responsive

    Component designed to work in all responsive breakpoints.
    Complete
  • Spanish translations

    Includes Spanish translations for default text content.
    Incomplete

Tokens

  • Code

    Tokens implemented in code.
    Complete
  • Design

    Tokens implemented in the Sketch.
    Complete