> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/progress-indicator.md).

# Progress Indicator

## Overview

<figure><img src="/files/K8dUALjkhbdmbhq1yhpe" alt="" width="375"><figcaption></figcaption></figure>

The Progress Indicator tracks a user's position in a multi-step process. It supports six visual layouts and connects to Manual, Variable, or Picklist data sources. Users can click steps to navigate, and the component exposes which step was clicked as an output variable.

***

## Tutorials

### Getting Started

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Watch Tim Combridge's guided video tutorial</strong></td><td>Tim Combridge demonstrates how to create a user-friendly progress indicator within Salesforce Flow using router navigation</td><td></td><td><a href="/files/fIzWxsDaykt0l0l2uHUi">/files/fIzWxsDaykt0l0l2uHUi</a></td><td><a href="https://www.linkedin.com/posts/tim-combridge_avonni-salesforce-salesforceflow-activity-7207245371687792640-N_BU">https://www.linkedin.com/posts/tim-combridge_avonni-salesforce-salesforceflow-activity-7207245371687792640-N_BU</a></td></tr></tbody></table>

### Building Progress Indicators

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Creating Navigational Screen Flows in Router Mode</strong></td><td>Learn how to build a progress indicator that helps users easily navigate through your multi-screen flow.</td><td></td><td><a href="/files/3a20jdcOTg6p8wR12LWb">/files/3a20jdcOTg6p8wR12LWb</a></td><td><a href="/pages/eVZFX53v2wiFNlIUiwC5">/pages/eVZFX53v2wiFNlIUiwC5</a></td></tr><tr><td><strong>Business Quote with vertical progress indicator</strong></td><td>Create a progress indicator that guides users through your flow, updating automatically as they move between screens.</td><td></td><td><a href="/files/iqZW30xnpYu1bvENJHrU">/files/iqZW30xnpYu1bvENJHrU</a></td><td><a href="/pages/ANGDePR1MJtOXPyRWFP5">/pages/ANGDePR1MJtOXPyRWFP5</a></td></tr></tbody></table>

### Advanced Techniques

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Creating a Universal Dynamic Progress Step Collection</strong></td><td></td><td></td><td><a href="/files/xGXtwA3EwX2EbDYxMJye">/files/xGXtwA3EwX2EbDYxMJye</a></td><td><a href="/pages/BMAGZLZ1D2E2PdUethMj">/pages/BMAGZLZ1D2E2PdUethMj</a></td></tr><tr><td><strong>How to Change the Appearance of Your Progress Indicator using a variable</strong></td><td></td><td></td><td></td><td><a href="/pages/o19so6YrnXGh0zUMn5aU">/pages/o19so6YrnXGh0zUMn5aU</a></td></tr><tr><td><strong>Error Handling</strong></td><td></td><td></td><td><a href="/files/SHnNQXawyZDlcSHh9Lqu">/files/SHnNQXawyZDlcSHh9Lqu</a></td><td><a href="/pages/JJ8GujnnavThEx0O5KgY">/pages/JJ8GujnnavThEx0O5KgY</a></td></tr></tbody></table>

***

## Configuration

To configure it, click the component on the Flow screen. The Edit Progress Indicator Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Data Source

Connect the Progress Indicator to its list of steps.

| Data Source                                                      | Best For                                                   |
| ---------------------------------------------------------------- | ---------------------------------------------------------- |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | Fixed steps you define in the builder                      |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Steps from a Flow collection variable                      |
| [**Picklist**](/flow/component-builder/data-sources/picklist.md) | Steps that match the values of a Salesforce picklist field |

<figure><img src="/files/MqUd1gWmwugXWARMWKlh" alt=""><figcaption></figcaption></figure>

### Data Mapping

When using Variable or Picklist, configure **Data Mappings** in the Properties tab to tell the component how to build each step from your data:

* **Value** — The step identifier; matched against **Current Step** to determine which step is active.
* **Label** — Display text for the step.
* **Icon Name** — Icon displayed on the step indicator.
* **Content** — HTML content shown beside the step (Vertical type only).
* **Sub Steps** — Nested sub-steps under this step.
* **Actions** — Action buttons displayed on the step.
* **Disabled** — Marks the step as non-interactive.
* **Hidden** — Hides the step from the indicator.

### Properties

| Setting                         | What It Does                                                                                                                                                                      |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Type**                        | The visual layout of the indicator: **Horizontal** (default), **Vertical**, **Bar**, **Circle**, **Path**, or **Vertical Navigation**.                                            |
| **Variant**                     | Applies to Horizontal, Vertical, and Vertical Navigation types. **Base** (default) — standard appearance. **Shaded** — adds a light gray border to step indicators.               |
| **Format**                      | Applies to Horizontal, Vertical, and Path types. **Linear** (default) — steps must be completed in order. **Non-Linear** — any step can be active regardless of prior completion. |
| **Current Step**                | The value of the step that should be highlighted as active. Set this to a flow variable that updates as the user progresses (e.g., `{!currentStep}`).                             |
| **Completed Steps**             | A list of step values to mark as completed. Supply a text collection variable that grows as the flow advances.                                                                    |
| **Error Steps**                 | A list of step values to mark with an error indicator. Applies to Horizontal, Vertical, and Path types.                                                                           |
| **Show Step Number**            | When enabled, step indicators show a number instead of a dot (Horizontal and Vertical types only).                                                                                |
| **Show Step Label**             | When enabled, the step label is shown below each indicator (Horizontal and Bar types only).                                                                                       |
| **Step Label Position**         | Where the label appears relative to the step — **Top** or **Bottom** (default). Applies to Horizontal type only.                                                                  |
| **Hide Bar Value**              | When enabled, hides the percentage value inside the Bar type progress track.                                                                                                      |
| **Mark as Complete**            | When enabled, all steps are immediately marked as completed.                                                                                                                      |
| **Has Error**                   | When enabled, the current step is shown in an error state. Applies to Horizontal, Vertical, and Path types.                                                                       |
| **Enable click for each steps** | When enabled, all steps are clickable regardless of whether an interaction is configured. Applies to Horizontal, Vertical, Path, and Vertical Navigation types.                   |

<figure><img src="/files/gEe648143j9I95G66aHO" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="137.33333333333331">Type</th><th>Description</th><th>Illustration</th></tr></thead><tbody><tr><td><strong>Horizontal</strong></td><td>Shows progress through a left-to-right sequence, guiding users through tasks or stages efficiently.</td><td><img src="/files/wQ0M5KAOx7RY8mbpYY4j" alt=""></td></tr><tr><td><strong>Vertical</strong></td><td>Designed to track the progression of tasks or processes in a top-to-bottom layout.</td><td><img src="/files/udlmYlwW0nMvrNFlafvX" alt=""></td></tr><tr><td><strong>Bar</strong></td><td>Shows task completion as a horizontal fill within a bar, increasing as progress towards the goal advances.</td><td><img src="/files/8wwK2mBFUVn6j2Xm0lxA" alt=""></td></tr><tr><td><strong>Circle</strong></td><td>Visually tracks task completion in a circular path, filling or highlighting as progress is made.</td><td><img src="/files/1IHWWAEc5KYm2Lt4HNAv" alt=""></td></tr><tr><td><strong>Path</strong></td><td>Each step is denoted by a distinct marker, reflecting the flow of the process.</td><td><img src="/files/mKDHSEOlJgOOgja36Twj" alt=""></td></tr><tr><td><strong>Vertical Navigation</strong></td><td>Marks progress through steps in a top-to-bottom layout, visually guiding users through stages or tasks.</td><td><img src="/files/4eoH6bp0ZQ5chrFdNigE" alt=""></td></tr></tbody></table>

**Setting the Current Step**

The progress indicator highlights whichever step matches the **Current Step** value. There are two approaches:

**1. Manual value** — ideal when steps are fixed and don't change based on user input. Enter the value of the step directly (e.g., `"verification"`).

<figure><img src="/files/rcoqJSYw1BV0AyPduCQX" alt=""><figcaption></figcaption></figure>

**2. Flow variable** — use this for dynamic flows where the current step changes based on user choices. Set **Current Step** to a text variable (e.g., `{!currentStep}`) and update that variable as the user advances through the flow.

<figure><img src="/files/HlIY2jJYBsgUfQkogydz" alt=""><figcaption></figcaption></figure>

### Step Icon

The **Step Icon** group appears when **Type** is Horizontal or Vertical. It controls the appearance of the step bubbles.

| Setting                | What It Does                                                                                                                 |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Icon Alignment**     | Vertical type only. Aligns the icon and actions: **Center** (default) or **Top** (useful for multi-line step content).       |
| **Icon Size**          | Size of the step bubbles: **Small** (default), Medium, or Large. Medium and Large display the step number if no icon is set. |
| **Error Icon Name**    | The icon to display on steps in error state (default: `utility:error`). Applies to Horizontal, Vertical, and Path types.     |
| **Error Image Source** | An image URL to use instead of an icon for error steps.                                                                      |
| **Hide Error Icon**    | When enabled, suppresses the error icon on error steps. Applies to Horizontal, Vertical, and Path types.                     |

### Current Step Icon

The **Current Step Icon** group allows you to set a custom icon or image specifically for the active step (Horizontal and Vertical types only).

| Setting          | What It Does                                                       |
| ---------------- | ------------------------------------------------------------------ |
| **Icon Name**    | A Lightning Design System icon name to display on the active step. |
| **Image Source** | An image URL to display on the active step instead of an icon.     |

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Progress Indicator. Configure them from the **Interactions** tab of the Edit Progress Indicator panel.

### Step Click

Fires when a user clicks a step. Use this to navigate to a corresponding screen or update the active step — the clicked step's record and value are available as output variables (`clickedStep`, `clickedStepValue`).

### Step Action Click

Fires when a user clicks an action button on a step. The name of the clicked action and the record of its parent step are exposed as output variables (`clickedStepActionName`, `clickedStepActionStep`, `clickedStepActionStepValue`).

***

## Styling

The available style options depend on the Type selected.

{% tabs %}
{% tab title="Common Attributes" %}

* **Margin:** Controls the spacing around the outside of the entire progress indicator component.
* **Padding:** Sets the space between the component's border and internal elements.
* **Border:** Customize the border's appearance (style, width, color).
* **Container:** Style the overall box that holds the progress indicator elements
  {% endtab %}

{% tab title="Type-Specific Attributes" %}

* **Horizontal**
  * **Bar:** Modifies the appearance of the progress bar itself.
  * **Icon:** Style the icons associated with each step (if used).
  * **Step Label:** Control the font, text size, color, etc., of step labels.
* **Vertical**
  * **Step Content:** Style the area below a step label where additional descriptive text could be displayed.
  * **Sub-Step Label:** Control the appearance of labels for sub-steps (if applicable).
* **Bar**
  * **Label:** Style the text labels for each segment of the bar.
  * **Value:** Style how the progress value is displayed (if applicable).
* **Circle**
  * **Circle:** Adjust the circle elements' size, color, and outline.
  * **Title:** Style the step titles within or near the circle elements.
* **Path**
  * **Size:** Adjust the size of the path graphic.
* **Vertical Navigation**
  * **Size:** Set the overall width of the vertical navigation bar.

**Important:** Remember that not all types will have all attributes
{% endtab %}
{% endtabs %}

***

## Output Variables

The Progress Indicator exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Progress Indicator component, and pick the output variable you need.

### Step Click

Available after a user clicks a step (requires an **On Step Click** interaction or **Enable Click for Each Step** to be on).

| Output variable        | Type             | What it returns                                                                                                      |
| ---------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------- |
| **Clicked Step**       | Record (SObject) | The full record of the step the user clicked.                                                                        |
| **Clicked Step Value** | Text (String)    | The value identifier of the clicked step — use this to update a **Current Step** variable and advance the indicator. |

> **Example:** A five-screen flow uses a progress indicator as a navigation menu. When the user clicks the "Review" step, **Clicked Step Value** returns `"review"`. A Decision element checks that value and routes the flow to the correct screen.

### Step Action Click

Available after a user clicks an action button on a step.

| Output variable                    | Type             | What it returns                                                                                                       |
| ---------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Clicked Step Action Name**       | Text (String)    | The name of the action button that was clicked — use this to branch logic when multiple actions are on the same step. |
| **Clicked Step Action Step**       | Record (SObject) | The full record of the step that contained the clicked action button.                                                 |
| **Clicked Step Action Step Value** | Text (String)    | The value identifier of the step that contained the clicked action button.                                            |

> **Example:** Each step has "Approve" and "Reject" action buttons. After a click, **Clicked Step Action Name** returns `"approve"` or `"reject"` and **Clicked Step Action Step Value** returns the step's identifier, so a Decision element can route accordingly.

### Flow Interaction Output Variables

Like all interactive Flow components, the Progress Indicator exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/progress-indicator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.