Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline
lightning:progressStep 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.
Note
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.
1({2 handleStepBlur : function(cmp, evt, helper){3 var stepIndex = evt.getParam('index'));4}5})
Usage Considerations
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.
Accessibility
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.
Attributes
Name
Description
Type
Default
Required
body
The body of the component. In markup, this is everything in the body of the tag.
Aura.Component[]
class
A CSS class for the outer element, in addition to the component's base classes.
String
label
Text to display as the name or tooltip for the step.
String
onstepblur
The action triggered when a step releases focus.
Aura.Action
onstepfocus
The action triggered when a step receives focus.
Aura.Action
onstepmouseenter
The action triggered when the mouse pointer moves onto the step.
Aura.Action
onstepmouseleave
The action triggered when the mouse pointer moves off the step.
Aura.Action
title
Displays tooltip text when the mouse moves over the element.
String
value
Text string to reference the step of the progress indicator.
