2025-08-04 06:49:49 +00:00
---
id: steps
title: Steps
---
2025-08-08 05:39:41 +00:00
The **Steps** component helps break down complex process into clear, manageable stages. It’
2025-08-04 06:49:49 +00:00
## Properties
2025-08-08 05:39:41 +00:00
| Property | Description |
| :-------------- | :------------------------------------------------------------------------------------------ |
| Variant | Choose what you want to display on the component - Label, Number, Plain. |
2025-08-04 06:49:49 +00:00
| Dynamic Options | Toggle on to add steps dynamically or click on **Add new option** button to add a new step. |
2025-08-08 05:39:41 +00:00
| Current step | Select which step should be selected by default. |
2025-08-04 06:49:49 +00:00
## Events
2025-08-08 05:39:41 +00:00
| Event | Description |
| :-------- | :------------------------------------------- |
| On select | Triggers whenever the user selects any step. |
2025-08-04 06:49:49 +00:00
:::info
2025-08-08 05:39:41 +00:00
Check [Action Reference ](/docs/actions/run-query ) docs to get detailed information about all the **Actions** .
2025-08-04 06:49:49 +00:00
:::
## Component Specific Actions (CSA)
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
2025-08-08 05:39:41 +00:00
| < div style = {{ width: " 150px " } } > Action < / div > | < div style = {{ width: " 250px " } } > Description < / div > | < div style = {{width: " 200px " } } > RunJS Query < / div > |
| :------------------------------------------- | :---------------------------------------------------------------- | :------------------------------------------------ |
| setStepVisible( ) | Set the step visibility. | `components.steps1.setStepVisible` |
| setStepDisable( ) | Disables the step. | `components.steps1.setStepDisable` |
| resetSteps( ) | Resets the completed steps, takes user to the default step. | `components.steps1.resetSteps` |
| setStep( ) | Takes user to step ID, marks all the previous steps as completed. | `components.steps1.setStep` |
| setVisibility( ) | Sets the visibility of the component. | `components.steps1.setVisibility(false)` |
| setDisable( ) | Disables the component. | `components.steps1.setDisable(true)` |
2025-08-04 06:49:49 +00:00
## Exposed Variables
2025-08-08 05:39:41 +00:00
| < div style = {{ width: " 100px " } } > Variables < / div > | < div style = {{ width: " 100px " } } > Description < / div > | < div style = {{ width: " 135px " } } > How To Access < / div > |
| :---------------------------------------------- | :----------------------------------------------------------------- | :-------------------------------------------------- |
| currentStepId | Holds the ID of the currently selected step on the step component. | `{{components.steps1.currentStepId}}` |
| steps | Stores information of all the steps. | `{{components.steps1.steps}}` |
| isVisible | Indicates if the component is visible. | `{{components.steps1.isVisible}}` |
| isDisabled | Indicates if the component is disabled. | `{{components.steps1.isDisabled}}` |
2025-08-04 06:49:49 +00:00
## Additional Actions
2025-08-08 05:39:41 +00:00
| < div style = {{ width: " 100px " } } > Action < / div > | < div style = {{ width: " 150px " } } > Description < / div > | < div style = {{ width: " 250px " } } > Configuration Options < / div > |
| :------------------------------------------- | :------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------- |
| Steps selectable | When disabled will disable the selection of steps. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
2025-08-04 06:49:49 +00:00
## Devices
2025-08-08 05:39:41 +00:00
| < div style = {{ width: " 100px " } } > Property < / div > | < div style = {{ width: " 150px " } } > Description < / div > | < div style = {{ width: " 250px " } } > Expected Value < / div > |
| :--------------------------------------------- | :------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------- |
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
2025-08-04 06:49:49 +00:00
## Styles
2025-08-08 05:39:41 +00:00
| < div style = {{ width: " 100px " } } > Style < / div > | < div style = {{ width: " 100px " } } > Description < / div > | Expected Value |
| :------------------------------------------ | :------------------------------------------------ | ---------------------------------------------- |
| Incompleted accent | Choose color for incomplete accent. | Select from theme or choose from color picker. |
| Incompleted label | Choose color for incomplete label. | Select from theme or choose from color picker. |
| Completed accent | Choose color for completed accent. | Select from theme or choose from color picker. |
| Completed label | Choose color for completed label. | Select from theme or choose from color picker. |
| Current step label | Choose color for current step label. | Select from theme or choose from color picker. |
2025-08-04 06:49:49 +00:00
:::info
Any property having **fx** button next to its field can be **programmatically configured** .
:::
