---
schema_version: "1"
id: 0447edbfa4fd6142c73fab17b374640096a7a1efd5ac15cb759c13c5e2de5c11
title: Progress Step (Beta)
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/progressStep/lightning-progress-step.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-progress-step.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 1483fa729cda4351cb7baaef79690a0f1284cf4dc7431bbbdb27da96a0fd5897
products:
  - Lightning Component Reference
---

# Progress Step (Beta)

**`lightning-progress-step`**

Defines a step in the lightning-progress-indicator.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="progressStep" model="lwc" namespace="lightning"}


:::::

:::::tab

**note:** `lightning-progress-step` is a pilot or beta service that is subject to the Beta Services Terms at [Agreements - Salesforce.com](https://www.salesforce.com/company/legal/agreements/) or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the [Product Terms Directory](https://ptd.salesforce.com/). Use of this pilot or beta service is at the Customer's sole discretion.

A `lightning-progress-step` component specifies a step inside the [`lightning-progress-indicator`](/docs/platform/lightning-component-reference/guide/lightning-progress-indicator.html) component.
Specify the `label` attribute to define the text for the name or tooltip for the step.
Specify the `value` attribute to set the value used to reference the step.

To specify the current step, the `current-step` attribute on `lightning-progress-indicator`
must match one of the `value` attributes on a `lightning-progress-step` component.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-progress-indicator current-step="step2">
        <lightning-progress-step label="Step One" value="step1">
        </lightning-progress-step>
        <lightning-progress-step label="Step Two" value="step2">
        </lightning-progress-step>
        <lightning-progress-step label="Step Three" value="step3">
        </lightning-progress-step>
    </lightning-progress-indicator>
</template>
```
<!-- prettier-ignore-end -->

If the progress indicator type isn’t specified or is set to `base`, the
`label` text appears in a tooltip when you hover
over the step.

If the progress indicator type is `path`, the label appears on hover if the step is completed or on the step itself if it's a
current or incomplete step.

For `base` type progress indicators, custom events implemented in `lightning-progress-step` fire during user interactions with the steps. Each event returns the index of the step. See the **Custom Events** section for more information.

For example, to get the index of the step that released focus, use the `event.detail` property on the `onstepblur` event handler.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-progress-indicator current-step="step2">
        <lightning-progress-step
            label="Step One"
            value="step1"
            onstepblur={handleStepBlur}
        >
        </lightning-progress-step>
        <lightning-progress-step
            label="Step Two"
            value="step2"
            onstepblur={handleStepBlur}
        >
        </lightning-progress-step>
        <lightning-progress-step
            label="Step Three"
            value="step3"
            onstepblur={handleStepBlur}
        >
        </lightning-progress-step>
    </lightning-progress-indicator>
</template>
```
<!-- prettier-ignore-end -->

```javascript
import { LightningElement } from "lwc";

export default class MyDemoComponent extends LightningElement {
  handleStepBlur(event) {
    const stepIndex = event.detail.index;
  }
}
```

## Design

Use `lightning-progress-step` within `lightning-progress-indicator`, which implements several designs in the Salesforce Lightning Design System (SLDS). The designs adapt to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                          | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design** (`base` type) | [Progress Indicator](https://v1.lightningdesignsystem.com/components/progress-indicator/)                                             | [Progress Indicator](https://www.lightningdesignsystem.com/components/progress-indicator/)                      |
| **Design** (`path` type) | [Path](https://v1.lightningdesignsystem.com/components/path/)                                                                         | [Path](https://www.lightningdesignsystem.com/components/path/)                                                  |
| **For Use In**           | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Usage Considerations

`lightning-progress-step` supports the custom events listed in the next section. It 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 `current-step` value on `lightning-progress-indicator`. For more information, see the [lightning-progress-step documentation](/docs/platform/lightning-component-reference/guide/lightning-progress-step.html).

## Custom Events

The `lightning-progress-step` component supports these events for the `base` type of `lightning-progress-indicator`.

**`stepblur`**

The event fired when a step releases focus.

The `stepblur` event returns this parameter.

| Parameter | Type   | Description                                |
| --------- | ------ | ------------------------------------------ |
| index     | string | The index of the step that released focus. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | true  | This event bubbles up through the DOM.                                                                    |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside of the component in which it was dispatched.                        |

**`stepfocus`**

The event fired when a step receives focus.

The `stepfocus` event returns the following parameter.

| Parameter | Type   | Description                                |
| --------- | ------ | ------------------------------------------ |
| index     | string | The index of the step that received focus. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | true  | This event bubbles up through the DOM.                                                                    |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside of the component in which it was dispatched.                        |

**`stepmouseenter`**

The event fired when the mouse pointer moves onto the step.

The `stepmouseenter` event returns the following parameter.

| Parameter | Type   | Description                                         |
| --------- | ------ | --------------------------------------------------- |
| index     | string | The index of the step the mouse pointer moves onto. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | true  | This event bubbles up through the DOM.                                                                    |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside of the component in which it was dispatched.                        |

**`stepmouseleave`**

The event fired when the mouse pointer moves off the step.

The `stepmouseleave` event returns the following parameter.

| Parameter | Type   | Description                                           |
| --------- | ------ | ----------------------------------------------------- |
| index     | string | The index of the step the mouse pointer moves out of. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | true  | This event bubbles up through the DOM.                                                                    |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside of the component in which it was dispatched.                        |

## 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.


:::::

:::::tab
::component-specification{component="progressStep" model="lwc" namespace="lightning"}

:::::

::::::