Progress Tracker

Example

<vega-progress-tracker
  id="prog-track"
  direction="vertical"
  current="1"
>
</vega-progress-tracker>

const vegaProgressTracker = document.getElementById("prog-track");
vegaProgressTracker.steps = ["Basic Information", "Contact Information", "Emergency Contact","W-2 Forms"];

Horizontal Example

<vega-progress-tracker
  id="prog-track"
  direction="horizontal"
  current="1"
>
</vega-progress-tracker>

const vegaProgressTracker = document.getElementById("prog-track");
vegaProgressTracker.steps = ["Basic Information", "Contact Information", "Emergency Contact","W-2 Forms"];

Note: The above examples use Vanilla JS. If you would like to use React, Angular, or Vue, please consult Storybook.

Usage

The vega-progress-tracker component tracks the progress of movement through sections of a page, or through multiple pages. It is useful for users to be able to know how much of a form or article they have completed.

It consists of a vertical list of sequential items with indicators showing to what extent a process has been completed.

Properties

All Parameters

<vega-progress-tracker
    id="vega-progress-tracker"
    direction="horizontal | vertical"
    can-click-step=true|false
>
</vega-progress-tracker >

Layout

The vega-progress-tracker supports vertical, horizontal, and mobile layouts, and will also support responsive design.

Steps

The progress tracker controls whether steps can be skipped through the property canClickStep:

1. When canClickStep is set to true, it is used to fill in the order of steps without strict requirements. Some steps can be left blank.
2. When canClickStep is set to false, strict control must be completed step by step, and the next step can only be entered after the previous step is completed.

After completing each step, you can set the completedStepArray property to mark those steps as completed.

const progressTracker = document.getElementById('vega-progress-tracker');

progressTracker.addEventListener('vegaCurrentStepUpdate', e => {
    if (!progressTracker.completedStepArray.includes(e.detail)) {
        progressTracker.completedStepArray.push(e.detail);
    }
});

Note: To make the the progress tracker fully functional, you must include the following code. This reveals four functions: setCurrent, getCurrent, nextStep and prevStep.

const progressTracker = document.getElementById('vega-progress-tracker');

progressTracker.setCurrent(1);
progressTracker.getCurrent();

progressTracker.nextStep();
progressTracker.prevStep();

Event

The vegaCurrentStepUpdate event is emitted when the progress tracker is changed.

document.getElementById("vega-progress-tracker").addEventListener("vegaCurrentStepUpdate", (e) => { // do something })

For more details, including examples in React and Vue, view in Storybook.

Accessibility

• Ensure that text spacing set through style attributes can be adjusted with custom stylesheets.
• Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
• Ensures every id attribute value is unique.
• Ensures tabindex attribute values are not greater than 0.

Best Practices

• Progress trackers are useful for helping manage user expectations with a process, such as a multi-step form. Steps in a progress tracker should be as clear as possible, and written so that they do not confuse users.
• Keep a logical flow. Users should be able to get a sense of the progression of the actions that need to be taken to accomplish the eventual goal (e.g. completely submitting a form, or an online ordering process).
• The direction of movement should be clear (such as in a vertical list). Use icons along with the individual steps to help users visualize their place within the process.
• Always indicate to users their location within the process. In other words, they should be able to understand what their current stage is.
• As a general rule, it is wise not to use any nested progress trackers, as they can create messy design situations. Keep it simple.