Display Flow Stages in a Flow Screen Component

To create a fully custom visual design for your flow’s progress indicator, or to maintain an existing custom stages component, you can build a screen component that renders stages by wiring it to the $Flow.ActiveStages and $Flow.CurrentStage global variables in Flow Builder.

To show stages in a standard path or steps style, use the built-in progress indicator instead. No custom component required. See Showing Users Their Progress in a Screen Flow.

How Flow Stages Work

You can define stages as resources with Flow Builder. Each stage has a label, an API name, and an order. Stages can be active by default, meaning they appear in $Flow.ActiveStages when a flow interview starts. You control which stage is current by updating $Flow.CurrentStage with assignment elements between screens.

Your screen component receives two values:

stages — the list of active stage labels, sourced from $Flow.ActiveStages as a String[]
currentStage — the label of the current stage, sourced from $Flow.CurrentStage as a String

Create the Screen Component

The component declares stages and currentStage as @api properties and registers them in the component’s configuration file so Flow Builder can wire them to flow variables.

JavaScript

1// flowStages.js
2import { LightningElement, api } from "lwc";
3
4export default class FlowStages extends LightningElement {
5  @api stages = [];
6  @api currentStage;
7}

HTML Template

1<!-- flowStages.html -->
2<template>
3  <lightning-progress-indicator current-step={currentStage} type="path">
4    <template for:each={stages} for:item="stage">
5      <lightning-progress-step key={stage} label={stage} value={stage}>
6      </lightning-progress-step>
7    </template>
8  </lightning-progress-indicator>
9</template>

Configuration File

1<!-- flowStages.js-meta.xml -->
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3  <apiVersion>68.0</apiVersion>
4  <isExposed>true</isExposed>
5  <targets>
6    <target>lightning__FlowScreen</target>
7  </targets>
8  <targetConfigs>
9    <targetConfig targets="lightning__FlowScreen">
10      <property name="stages" type="String[]" />
11      <property name="currentStage" type="String" />
12    </targetConfig>
13  </targetConfigs>
14</LightningComponentBundle>

Add the Component to Your Flow Screens in Flow Builder

Open your screen flow in Flow Builder.
Define your stages as flow resources. In the Manager panel, click New Resource, select Stage, and enter a label and order for each stage. To include a stage in $Flow.ActiveStages at the start of the flow interview, select Active by default.
On each screen element that should show the progress indicator, add the custom stages component.
For the Stages property, enter {!$Flow.ActiveStages}. For the Current Stage property, enter {!$Flow.CurrentStage}. In the Advanced section, select Manually Assign Variables.
Between each pair of screen elements, add an assignment element that sets $Flow.CurrentStage to the label of the next stage.

See Also