The Wizard component for Retool Apps

A container for a series of steps with multiple branches and outcomes.

Version: Self-hosted 3.148 Stable

Wizard groups component into a series of steps that follow a linear path or branch into multiple ones. It supports running queries on step change or reset, virtual steps that display a loading screen, and setting the initial step dynamically.

Demo

For more information about using the Form component, refer to the forms guide.

Properties

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

currentStep

The generated ID for step.

Type	string
Mutability	Read-only

---

customInitialStepName

The customized name for the first step in the wizard.

Type	string
Mutability	Read-only

---

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Hidden Method setHidden()
Default	false

Examples

true

---

hideResetButton

Whether to hide the reset button.

Type	boolean
Mutability	Read-only

---

id

The unique identifier (name).

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI Inspector
Default	wizard1

Examples

query1

button1

---

initialStep

The generated ID for the first step in the wizard.

Type	string
Mutability	Read-only

---

isHiddenOnDesktop

Whether to show or hide this object in the desktop layout.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Advanced > Show on desktop
Default	false

Examples

true

---

isHiddenOnMobile

Whether to show or hide this object in the mobile layout.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Advanced > Show on mobile
Default	true

Examples

true

---

maintainSpaceWhenHidden

Whether to take up space on the canvas if hidden is true.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Advanced > Maintain space when hidden
Default	false

Examples

true

---

margin

The amount of margin to render outside.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI Inspector > Spacing > Margin
Allowed Values	Value UI Option Description 4px 8px Normal Normal margin. 0 None No margin.
Default	4px 8px

Examples

4px 8px

---

onReset

The query to run when the Reset button is clicked.

Type	string
Mutability	Read-only

---

onStepChange

The query to run when users navigate between steps.

Type	string
Mutability	Read-only

---

scroll

Whether to use scroll navigation.

Type	boolean
Mutability	Read-only

---

showInEditor

Whether the component remains visible in the editor if hidden is true.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Advanced > Always show in edit mode
Default	false

Examples

true

---

spinWhenChildrenAreFetching

Whether to use a loading state if nested objects are fetching data.

Type	boolean
Mutability	Read-only

---

steps

A list of step names.

Type	array
Array values	string
Mutability	Read-only

---

style

Custom style options.

Type	object
Mutability	Control Usage Retool UI Inspector > Appearance > style

---

Methods

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

wizard.reset()

Reset all child inputs to default values or clears them if no default values are set.

Definition

wizard.reset()

Examples

Reset wizard.

wizard.reset();

---

wizard.setStepId()

Set the current step ID.

Definition

wizard.setStepId(stepId)

Parameters

stepId

The ID of the step.

Type

string

---

---

Events

Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.

Event	Description