Progress Indicator (Beta)

A lightning:progressIndicator component displays a horizontal list of steps in a process, indicating the number of steps in a given process, the current step, as well as prior steps completed. For example, Sales Path uses a progress indicator to guide sales reps through the stages of the sales process.

You can create progress indicators with different visual styling by specifying the type attribute. Set type="base" to create a component that implements styling from progress indicators in the Lightning Design System. Set type="path" to create a component that implements styling from path in the Lightning Design System. Stage coaching information isn't currently supported.

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

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

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

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

To denote an error on the current step, set hasError 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.

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

Each progress step is rendered with assistive text, which is also the label of that step. For the base type, you can use the Tab key to navigate from one step to the next. 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 to 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. Additionally:

• 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