The Wizard component for classic apps
A container for a series of steps with multiple branches and outcomes.
You're viewing documentation for classic apps, which use Retool's original app editor. The new app builder is the recommended way to build apps and where Retool focuses new development.
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
falsetrue
id
The unique identifier (name).
| Type | string |
| Format | Plain Text |
| Configurability | Inspector |
| Default | wizard1 |
Examples
falsequery1
falsebutton1
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
falsetrue
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
falsetrue
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
falsetrue
margin
The amount of margin to render outside.
| Type | string | |||||||||
| Format | Plain Text | |||||||||
| Configurability | Inspector > Spacing > Margin | |||||||||
| Allowed Values |
| |||||||||
| Default | 4px 8px |
Examples
false4px 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
falsetrue
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.focus()
Examples
Set focus on wizard.
wizard.focus();
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 |
|---|