Components

Process list

Use: Deployed

USWDS v3

The process list, also known as the subway map, is used in a static informational context to describe the process to apply for a benefit or to provide tracking information to a user where they are in a given process.

Examples - v1

Default - Content list

View va-process-list in Storybook

Additional styling

View va-process-list–additional-styling in Storybook

Examples - v3

Usage

Refer to the U.S. Web Design System for usage guidance

Additional guidance for VA

Additional uses of a process list

For multi-step processes. In a multi-step process where the user may need to track progress over an extended period.

Additional reasons to consider something else

When instructing users to take specific actions that don’t require explanation, not describing high-level steps. This component isn’t appropriate for a list of instructions such as “Click the login button” or “Right-click and select Save As” that don’t require any additional description.

How this component works

Be thoughtful about the number of steps. A process list should include between three and ten steps to prevent it from getting too unwieldy or confusing.
Do not stack. Only one instance of this component should appear on a page.
Do not mash up this component with other components. The functionality of this component should not be combined with the functionality for other components. For example, using an Accordion to act as the header for a step in the process would be inappropriate usage.. Content should be edited to fit the step, provide key information, and be visible by default. Use of the additional info component to condense content within a step is permissible.
Each step must have visible content. Each step should have both a heading and content that helps describe the step in more detail. Do not collapse or hide all content within a step. An explanation of the step is minimally required.

Placement

The Process list appears after a start form link on the form Introduction page. Additional calls-to-action to start the application or process that the process list describes can be found within (in the case of apply) and below the list.

Instances of this component in production

An example of the process list component on an Education benefits application. — The Education benefits application form 1995 uses a process list on the introduction page of the application.

Code usage

Attributes and Properties

Property	Attribute	Type	Default	Description
`uswds`	`uswds`	`boolean`	`false`	Whether or not the component will use USWDS v3 styling.

Content considerations

List headings should start with a verb. Examples include “Prepare”, “Apply”, “Review”, etc.
Make headings clear and concise. You can always write more content in paragraphs and other HTML elements below the heading.
Make process step content clear and concise. Process list should not be a container for many other components and text. Use plain language and briefly explain the step in the process.

Accessibility considerations

Refer to the U.S. Web Design System for accessibility guidance

Additional accessibility considerations for VA

Don’t use headings alone. Each step should have both a heading and content that helps describe the step in more detail.

Component checklist

Maturity

Guidance: Examples, usage, code usage, content considerations, and accessibility considerations are all complete.
Research: VFS team conducted research on this component which is linked from this page.
Stability: Component has been in production for more than 3 months with no significant issues found.
Adoption: Multiple teams have adopted this component.

Accessibility

Accessible use of color: Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
Accessible contrast: Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3). Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Keyboard interactions: Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions. All interactive elements can be selected and activated using the keyboard.
Content zoom tested: Component has been tested with the display set to 400% at 1280px viewport width to ensure that the component does not have overlapping text or elements and all interactive elements still operate.
Tested in screen readers: Tested with screen readers to ensure there are no issues with reading order, spelling, dynamic content, and interactive elements.

Code assets

Variations: Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
Responsive: Component depicted in all responsive breakpoints.
Interactive states: Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
Tokens: All design attributes (color, typography, layout, etc.) are available as tokens.
Internationalization: Describes i18n attributes.

Visual assets

Variations: Sketch library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
Responsive: Component designed to work in all responsive breakpoints.
Interactive states: Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
Tokens: All design attributes (color, typography, layout, etc.) are available as tokens.

81% complete (13 of 16)

Legend:

Complete
Incomplete
Not applicable