Progress Step (Beta)

A lightning:progressStep component specifies a step inside the lightning:progressIndicator component. Specify the label attribute to define the text displayed for the name and tooltip for the step. Specify the value attribute to set the value used to reference the step.

To specify the current step, the currentStep attribute on lightning:progressIndicator must match one of the value attributes on a lightning:progressStep component.

If the progress indicator type is not specified or is set to base, 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.

For base type progress indicators, the lightning:progressStep components fire events during user interactions with the steps. Each event returns the index of the step.

This example shows how to get the index of the step that released focus, using the onstepblur event handler.

The client-side controller:

lightning:progressStep doesn't support the click event. To enable users to interactively update their progress to the next or previous steps, include a clickable element that updates the currentStep value on lightning:progressIndicator. For more information, see the lightning:progressIndicator documentation.

Each progress step is decorated 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. For the path type, press Tab to activate the current step and use the Up and Down Arrow key or the Left and Right arrow key to navigate from one step to another.