ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/steps.md

id	title
steps	Steps

The Steps component helps break down complex process into clear, manageable stages. It’s ideal for multi-step forms, onboarding flows, or approval processes, giving users a clear sense of progress and direction.

Properties

Property	Description
Variant	Choose what you want to display on the component - Label, Number, Plain.
Dynamic Options	Toggle on to add steps dynamically or click on Add new option button to add a new step.
Current step	Select which step should be selected by default.

Events

Event	Description
On select	Triggers whenever the user selects any step.

:::info Check Action Reference docs to get detailed information about all the Actions. :::

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.

<div style={{ width:"150px"}}> Action	<div style={{ width:"250px"}}> Description	<div style={{width: "200px"}}> RunJS Query
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)

Exposed Variables

<div style={{ width:"100px"}}> Variables	<div style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> How To Access
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}}

Additional Actions

<div style={{ width:"100px"}}> Action	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
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.

Devices

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Expected Value
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.

Styles

<div style={{ width:"100px"}}> Style	<div style={{ width:"100px"}}> Description	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.

:::info Any property having fx button next to its field can be programmatically configured. :::