FREE SALESFORCE LWC COMPONENT

Stepper

Keep the current step clear and make completed versus upcoming states understandable without color alone.

Component structure

COMPONENTwcsStepper

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <ol class="stepper" aria-label="Progress">
    <li class="complete">1. Details</li>
    <li class="current" aria-current="step">2. Review</li>
    <li>3. Finish</li>
  </ol>
</template>

JavaScript

import { LightningElement } from 'lwc';

export default class WcsStepper extends LightningElement {}

CSS

.stepper{display:flex;gap:1rem;list-style:none;padding:0;margin:0;flex-wrap:wrap}.stepper li{padding:.65rem .9rem;border-bottom:2px solid #c9c9c9;color:#5f6b7a}.stepper .complete{border-color:#2e844a}.stepper .current{border-color:#0b5cab;font-weight:600;color:#181818}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>