The Form component for Retool Mobile

A form to group and submit input fields.

Version: Cloud and 3.188 Edge

Demo

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.

align

The horizontal alignment of the contents.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description left Left alignment. center Center alignment. right Right alignment.
Default	left

Examples

"center"

---

data

The data.

Type	string | number | boolean | object | array
Format	Custom data
Mutability	Control Usage Retool UI Inspector Method copyToClipboard()

---

disabled

Whether input, interaction, selection, or triggering is disabled.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Interaction > Disabled Method setDisabled()
Default	false

Examples

true

---

disableSubmit

Whether to disable form submission.

Type	boolean
Mutability	Control Usage Retool UI Inspector

---

enableFullBleed

Whether to expand the contents to fill available space.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Expand contents to fit
Default	false

Examples

true

---

footerPadding

The amount of padding used within the footer.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Footer > Padding
Allowed Values	Value UI Option Description 8px 12px Normal 8px top and bottom, 12px left and right. 0 None No padding.
Default	8px 12px

Examples

"8px 12px"

---

gap

The gap between components.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description 0 4 8 12 16 24 32 48 64 128 256

---

headerPadding

The amount of padding used within the header.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Header > Padding
Allowed Values	Value UI Option Description 8px 12px Normal 8px top and bottom, 12px left and right. 0 None No padding.
Default	8px 12px

Examples

"8px 12px"

---

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

---

hoistFetching

Whether to display a loading indicator whenever nested objects are fetching data.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Interaction > Hoist loading state
Default	false

Examples

true

---

id

The unique identifier (name).

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

Examples

query1

button1

---

initialData

The data used to populate default values for input fields.

Type	array
Array values	object
Mutability	Read-only

---

invalid

Whether the value has failed any validation rules.

Type	boolean
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

---

justify

The horizontal alignment of the contents.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description left Left alignment. center Center alignment. right Right alignment. stretched Justified alignment

---

layout

The layout of content.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description row Horizontal row layout. column Vertical column layout.

---

loading

Whether to display a loading indicator.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Interaction > Loading
Default	false

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

---

padding

The amount of padding to render inside.

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

Examples

4px 8px

---

requireValidation

Whether all input fields must be valid to submit. If valid is false for any input field, the Invalid event handler is triggered.

Type	boolean
Mutability	Read-only

---

resetAfterSubmit

Whether to reset input field values using initialData after form submission.

Type	boolean
Mutability	Read-only

---

showBody

Whether to show the body.

Type	boolean
Mutability	Read-only

---

showBorder

Whether to show a border.

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

Examples

true

---

showFooter

Whether to show the footer area.

Type	boolean
Mutability	Control Usage Retool UI Inspector Method setShowFooter()

---

showFooterBorder

Whether to show a border above the footer.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Footer > Appearance > Show separator

Examples

true

---

showHeader

Whether to show the header area.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Header > Appearance > Show header Method setShowHeader()
Default	false

Examples

true

---

showHeaderBorder

Whether to show a border under the header.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Header > Appearance > Show separator
Default	true

Examples

true

---

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

---

submitting

Whether the Submit event handler is running.

Type	boolean
Mutability	Read-only

---

tooltipText

The tooltip text to display next to the label on hover.

Type	string
Format	Markdown
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Helper text
Default	null

Examples

Submit

---

Methods

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

form.clear()

Clear all values.

Definition

form.clear()

Examples

Clear the value of form.

form.clear();

---

form.clearValidation()

Clear the validation message from the input field.

Definition

form.clearValidation()

Examples

Clear the validation message from form.

form.clearValidation();

---

form.reset()

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

Definition

form.reset()

Examples

Reset form.

form.reset();

---

form.setData()

Set child input values.

Definition

form.setData(data)

Parameters

data

The data.

Type	string | number | boolean | object | array
Format	Custom data

---

---

form.setDisabled()

Set the disabled value to toggle whether the input field is disabled. Defaults to true without a parameter.

Definition

form.setDisabled(disabled)

Parameters

disabled

Whether input, interaction, selection, or triggering is disabled.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Disable form.

form.setDisabled(true);

Enable form.

form.setDisabled(false);

---

form.setHidden()

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Definition

form.setHidden(hidden)

Parameters

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Hide form.

form.setHidden(true);

Unhide form.

form.setHidden(false);

---

form.setShowBody()

Set the showBody value to toggle whether the component body is visible.

Definition

form.setShowBody(showBody)

Parameters

showBody

Whether to show the body.

Type

boolean

---

Examples

Show the body of form.

form.setShowBody(true);

Hide the body of form.

form.setShowBody(false);

---

form.setShowFooter()

Set the showFooter value to toggle whether the component footer is visible.

Definition

form.setShowFooter(showFooter)

Parameters

showFooter

Whether to show the footer area.

Type

boolean

---

Examples

Show the footer of form.

form.setShowFooter(true);

Hide the footer of form.

form.setShowFooter(false);

---

form.setShowHeader()

Set the showHeader value to toggle whether the component header is visible.

Definition

form.setShowHeader(showHeader)

Parameters

showHeader

Whether to show the header area.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Show the header of form.

form.setShowHeader(true);

Hide the header of form.

form.setShowHeader(false);

---

form.submit()

Submit the form.

Definition

form.submit()

---

form.validate()

Validates the value of the input field.

Definition

form.validate()

Examples

Validate the value of form.

form.validate();

---

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
Invalid	A value is invalid.
Submit	The value is submitted.