Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Process List

use: best-practice Web
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

Default

View va-process-list default in Storybook

Status

View va-process-list status in Storybook

Header Size

View va-process-list header size in Storybook

Custom Sizing

View va-process-list custom sizing in Storybook

Usage

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

How do I get VEAP benefits?

If you have questions, we can help you and your school understand the requirements.

If you haven't started training yet

Submit an Application for VA Education Benefits (VA Form 22-1990) online.
Apply for education benefits online now

You can also apply by mail, in person, or with the help of a trained professional.
Learn more about how to apply for education benefits

Note:
If you're on active duty right now, you'll need to have your Education Services Officer approve your enrollment and your Commanding Officer verify your service.
If you're not on active duty right now, you'll need to send copy 4 (member copy) of your DD214, Certificate of Release, or Discharge from Active Duty.

If you've already started training

Take your VA Form 22-1990 application and the member copy of your DD214 to your school or employer. Ask them to complete VA Form 22-1999, Enrollment Certification, and send all the forms to us.
Get VA Form 22-1990 to download

Ask your school or training official to verify your enrollment with us. We'll review your application and let you know if we need anything else.

The VEAP benefits application form uses a Process List on the introduction page.

Code usage

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.
  • Status eyebrow should match context. When using the optional status eyebrow, make sure the status matches the context of the Process List. The provided statuses are pending, active, complete.

Accessibility considerations

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.
  • Use eyebrow status for update. When using a Process List that has a status update the eyebrow feature is required for accessibility.

Component checklist

Web Platform

72%

8 of 11 complete

Maturity

Guidance

Web

Examples, usage, code usage, content considerations, and accessibility considerations are all complete.

Research

Web

VFS team conducted research on this component which is linked from this page.

Stability

Web

Component has been in production for more than 3 months with no significant issues found.

Adoption

Web

Multiple teams have adopted this component.

Accessibility

While this component has been previously tested against older criteria, it has not yet been audited with the updated testing criteria.

Code assets

Variations

Web

Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)

Responsive

Web

Component depicted in all responsive breakpoints.

Interactive states

Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).

Tokens

N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Internationalization

Web

Describes i18n attributes.

Visual assets

Variations

Web

Figma library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)

Responsive

Web

Component designed to work in all responsive breakpoints.

Interactive states

Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).

Tokens

N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Legend:

  • Complete
  • Incomplete
  • N/A Not applicable

Provide feedback

Share your feedback, report issues, or suggest improvements for the Process List component. Your input helps us make the design system better for everyone.

Edit this page in GitHub (Permissions required)
Last updated: Sep 08, 2026