function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rohith Kumar 98Rohith Kumar 98 

how to add label below each step of Progress Indicator in lwc?

User-added imageIn the above progress indicator, I need to add a label that is displayed always and displayed below each of the steps.

component code: 
<lightning-progress-indicator current-step="1" type="base" has-error="false" variant="base">
    <lightning-progress-step label="Claim Information" value="1"></lightning-progress-step>
    <lightning-progress-step label="Job Details" value="2"></lightning-progress-step>
    <lightning-progress-step label="Review Claim" value="3"></lightning-progress-step>
    <lightning-progress-step label="Submit Claim" value="4"></lightning-progress-step>
</lightning-progress-indicator>

Expected visual:
User-added image​​​​​​​
Anna RudasAnna Rudas
I used the code below and it works for me:
  
<div class="slds-progress">
                                    <ol class="slds-progress__list">
                                        <li class="slds-progress__item slds-is-active" style="align-items: flex-start;">
                                            <button class="slds-button slds-progress__marker">
                                                <span class="slds-assistive-text">Step 1 - Active</span>
                                            </button>
                                            <div class="slds-progress__item_content slds-grid slds-grid_align-spread" style="margin-left: -0.5rem;">Step 1</div>
                                        </li>
                                        <li class="slds-progress__item">
                                            <button class="slds-button slds-progress__marker">
                                                <span class="slds-assistive-text">Step 2 </span>
                                            </button>
                                            <div class="slds-progress__item_content slds-grid slds-grid_align-spread">Step 2</div>
                                        </li>
                                        <li class="slds-progress__item" style="align-items: flex-end;">
                                            <button class="slds-button slds-progress__marker">
                                                <span class="slds-assistive-text">Step 3</span>
                                            </button>
                                            <div class="slds-progress__item_content slds-grid slds-grid_align-spread" style="margin-right: -0.5rem;">Step 3</div>
                                        </li>
                                    </ol>
                                    <div class="slds-progress-bar slds-progress-bar_x-small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" role="progressbar">
                                        <span class="slds-progress-bar__value" style="width:0%">
                                          <span class="slds-assistive-text">Progress: 0%</span>
                                        </span>
                                    </div>
                                </div>
With a css style 
.slds-progress ol li {
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    align-items: center;
}
Hope it helps.
Anna RudasAnna Rudas
One more solution. You just add one more progress list below your lightning-progress-indicator 
<lightning-progress-indicator current-step="1" type="base" has-error="false" variant="base">
   <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
   <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
   <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
   <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
</lightning-progress-indicator>

<div class="slds-progress">
   <ol class="slds-progress__list">
       <div style="margin-left: -0.5rem;">Step 1</div>
       <div>Step 2</div>
       <div>Step 3</div>
       <div style="margin-right: -0.5rem;">Step 4</div>
   </ol>
</div>