Progress Indicator (Beta)

lightning-progress-indicator

Provides a visual indication on the progress of a particular process.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="progressIndicator" model="lwc" namespace="lightning"}

:::::

:::::tab

note: lightning-progress-indicator is a pilot or beta service that is subject to the Beta Services Terms at Agreements - Salesforce.com or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the Product Terms Directory. Use of this pilot or beta service is at the Customer's sole discretion.

A lightning-progress-indicator component shows a horizontal list of steps in a process, indicating:

• The number of steps in a given process
• The current step
• The prior steps that are completed

For example, Sales Path uses a progress indicator to guide sales reps through the stages of the sales process.

To create steps, use one or more lightning-progress-step component along with label and value attributes. To specify the current step, the current-step attribute must match one of the value attributes on a lightning-progress-step component.

<template>
    <lightning-progress-indicator current-step="step2">
        <lightning-progress-step label="Step One" value="step1">
        </lightning-progress-step>
        <lightning-progress-step label="Step Two" value="step2">
        </lightning-progress-step>
        <lightning-progress-step label="Step Three" value="step3">
        </lightning-progress-step>
    </lightning-progress-indicator>
</template>

Design

lightning-progress-indicator implements several designs in the Salesforce Lightning Design System (SLDS). The designs adapt to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

You can create progress indicators with different visual styling by specifying the type attribute.

• Set type="base" to create a progress indicator. The vertical progress indicator isn't currently supported.
• Set type="path" to create a path. Stage coaching information isn't currently supported.

If the type isn’t specified, the default type base is used. The label value is displayed in a tooltip when you hover over the step. If the progress indicator type is path, the label appears on hover if the step is completed or on the step itself if it's a current or incomplete step.

Create a Path Type Progress Indicator

This example creates a path showing the current step at "Step Two". "Step One" is marked completed and "Step Three" isn’t yet completed.

<template>
    <lightning-progress-indicator type="path" current-step="step2">
        <lightning-progress-step label="Step One" value="step1">
        </lightning-progress-step>
        <lightning-progress-step label="Step Two" value="step2">
        </lightning-progress-step>
        <lightning-progress-step label="Step Three" value="step3">
        </lightning-progress-step>
    </lightning-progress-indicator>
</template>

The component shows the current step in an active state. It marks all steps preceding the current step as completed.

Implement the Error State

To denote an error on the current step, set has-error to true. Only the base type supports the error state. This example creates a progress indicator that updates to the next step and applies an error on the current step.

<lightning-progress-indicator
    current-step={current}
    type="base"
    has-error={error}
>
    <lightning-progress-step
        label="Step 1"
        value="s1"
    ></lightning-progress-step>
    <lightning-progress-step
        label="Step 2"
        value="s2"
    ></lightning-progress-step>
    <lightning-progress-step
        label="Step 3"
        value="s3"
    ></lightning-progress-step>
    <lightning-progress-step
        label="Step 4"
        value="s4"
    ></lightning-progress-step>
</lightning-progress-indicator>
<lightning-button label="Next step" onclick={nextStep}></lightning-button>
<lightning-button label="Show error" onclick={addError}></lightning-button>

Applying an error state on the current step updates the completed icon to an error icon, similar to the progress indicator SLDS blueprint.

import { LightningElement } from "lwc";

export default class ProgressIndicatorError extends LightningElement {
  current = "s3";
  error = false;

  nextStep() {
    this.current = "s4";
  }

  addError() {
    this.error = true;
  }
}

Accessibility

Each progress step is rendered with assistive text, which is constructed from the step's label and a description of the step's state. For example, for a step labeled Contacted, the assistive text is "Contacted - Current Stage" when the step is the current step, and "Contacted - Stage Complete" when the step is completed. The text of the step's state can't be changed.

The assistive text for a step that's inactive or has an error doesn't include information about the step's state.

For the base type, you can use the Tab key to navigate from one step to the next. Each step connects to the next step with a horizontal progress bar, such that two steps share one bar. Press Shift+Tab to go to the previous step. The progress bar renders with aria-valuenow set to a scale of 0 to 100, which defines the current value for the progress bar. For example, if you have 4 steps and the third step is the current, aria-valuenow is set to 66, since 2 out of 3 bars are marked as completed. Similarly, the aria-valuemin and aria-valuemax attributes are set to 0 and 100 respectively.

For the path type, press Tab to set focus on the active stage and use the Up and Down Arrow keys or the Left and Right arrow keys to navigate from one stage to another. The aria-selected attribute on the hyperlink element associated with the stage is set to true when a stage receives focus and false when it doesn't receive focus.

When you navigate away from the current active stage, the stage remains the current stage but the shift in focus makes it inactive. The current stage changes color from dark blue to white to indicate it's not the active stage.

Consider these additional scenarios.

• Navigating to an incomplete stage makes it an active incomplete stage, which changes its color from gray to dark blue
• Navigating to a completed stage makes it an active completed stage, which changes its color from green to dark blue

:::::

:::::tab ::component-specification{component="progressIndicator" model="lwc" namespace="lightning"}

:::::

::::::