The Wizard component for Retool Apps
A container for a series of steps with multiple branches and outcomes.
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.
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.
customInitialStepName
The customized name for the first step in the wizard.
| Type | string |
| Configurability | Read-only |
| Default | null |
hidden
Whether this object is hidden from view.
| Type | boolean |
| Format | True/False |
| Configurability | Inspector > Appearance > Hidden |
| Default | false |
Examples
true
id
The unique identifier (name).
| Type | string |
| Format | Plain Text |
| Configurability | Inspector |
| Default | wizard1 |
Examples
query1
button1
initialStep
The generated ID for the first step in the wizard.
| Type | string |
| Configurability | Read-only |
| Default | null |
isHiddenOnDesktop
Whether to show or hide this object in the desktop layout.
| Type | boolean |
| Format | True/False |
| Configurability | 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 |
| Configurability | 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 |
| Configurability | Inspector > Appearance > Advanced > Maintain space when hidden |
| Default | false |
Examples
true
margin
The amount of margin to render outside.
| Type | string | |||||||||
| Format | Plain Text | |||||||||
| Configurability | Inspector > Spacing > Margin | |||||||||
| Allowed Values |
| |||||||||
| Default | 4px 8px |
Examples
4px 8px
onReset
The query to run when the Reset button is clicked.
| Type | string |
| Configurability | Read-only |
| Default | null |
onStepChange
The query to run when users navigate between steps.
| Type | string |
| Configurability | Read-only |
| Default | null |
showInEditor
Whether the component remains visible in the editor if hidden is true.
| Type | boolean |
| Format | True/False |
| Configurability | 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 |
| Configurability | Read-only |
| Default | null |
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.
wizard.reset()
Examples
Reset wizard.
wizard.reset();
wizard.setStepId(stepId)
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 |
|---|