Skip to main content

The Number Input component for Retool Mobile

An input field to enter a number.

Version: Self-hosted 3.148 Stable
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.

allowNegativeNumbers​

Whether to allow the input of negative numbers.

Type boolean
Format True/False
Mutability
ControlUsage
Retool UI Inspector
Default
false
Examples
true

disabled​

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

Type boolean
Format True/False
Mutability
ControlUsage
Retool UI Inspector > Interaction > Disabled
MethodsetDisabled()
Default
false
Examples
true

events​

A list of configured event handlers that trigger actions or queries.

Type array
Array values object
Mutability
ControlUsage
Retool UI Inspector > Interaction > Event handlers
Array Object Properties

event​

The event that triggers the action. Refer to the events section for details of available events for this object.

Type string
Mutability
ControlUsage
Retool UI Inspector > Interaction > Event handlers > Event

method​

The JavaScript method to perform when type is datasource, widget, state, or localStorage.

Type string
Mutability
ControlUsage
Retool UI Inspector > Interaction > Event handlers > Edit event handler > Run script actions

type​

The type of action to perform.

Type string
Mutability
ControlUsage
Retool UI Inspector > Interaction > Event handlers > Edit event handler > Action
Allowed Values
ValueDescription
datasource

Control query.

widget

Control component.

script

Run script.

state

Set variable.

localStorage

Set localStorage.

util

Perform utility action (e.g., Open URL or Confetti).

hidden​

Whether this object is hidden from view.

Type boolean
Format True/False
Mutability
ControlUsage
Retool UI Inspector > Appearance > Hidden
MethodsetHidden()
Default
false
Examples
true

iconAfter​

The suffix icon to display.

Type string
Format Icon Key
Mutability
ControlUsage
Retool UI Inspector > Content > Add-ons > Suffix icon
Default
null
Examples
/icon:bold/shopping-gift

iconBefore​

The prefix icon to display.

Type string
Format Icon Key
Mutability
ControlUsage
Retool UI Inspector > Content > Add-ons > Prefix icon
Default
null
Examples
/icon:bold/shopping-gift

label​

The text label to display.

Type string
Format Plain Text
Mutability
ControlUsage
Retool UI Inspector > Content > Add-ons > Label > Label
Default
null
Examples
"Label"

labelCaption​

The additional text to display with the label.

Type string
Format Plain Text
Mutability
ControlUsage
Retool UI Inspector > Content > Add-ons > Label > Caption

maxLength​

The maximum number of characters to allow.

Type number
Format Integer
Mutability
ControlUsage
Retool UI Inspector > Interaction > Validation rules > Max length
Default
null
Examples
100

minLength​

The minimum number of characters to allow.

Type number
Format Integer
Mutability
ControlUsage
Retool UI Inspector > Interaction > Validation rules > Min length
Default
null
Examples
20

placeholder​

The text to display within the input field when there is no value.

Type string
Formatstring
Mutability
ControlUsage
Retool UI Inspector > Content > Placeholder
Default
Enter a value
Examples
Enter a value

showStepper​

Whether the input field includes buttons to adjust the value incrementally.

Type boolean
Mutability
ControlUsage
Retool UI Inspector > Appearance > Advanced > Show stepper buttons

stepSize​

The step size used when adjusting the value.

Type number
Mutability Read-only

value​

The value.

Type string | number | boolean | object | array
Mutability Read-only

Methods​

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

numberInput.clearValidation()​

Clear the validation message from the input field.

Definition
numberInput.clearValidation()
Examples

Clear the validation message from numberInput.

numberInput.clearValidation();

numberInput.clearValue()​

Clear the current values.

Definition
numberInput.clearValue()
Examples

Clear the current value of numberInput.

numberInput.clearValue();

numberInput.focus()​

Set focus on the input field.

Definition
numberInput.focus()
Examples

Set focus on numberInput.

numberInput.focus();

numberInput.resetValue()​

Reset the current value to the default value.

Definition
numberInput.resetValue()
Examples

Reset the current value of numberInput.

numberInput.resetValue();

numberInput.setDisabled()​

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

Definition
numberInput.setDisabled(disabled)
Parameters

disabled​

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

Type boolean
Format True/False
Default
false
Examples
true
Examples

Disable numberInput.

numberInput.setDisabled(true);

Enable numberInput.

numberInput.setDisabled(false);

numberInput.setHidden()​

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

Definition
numberInput.setHidden(hidden)
Parameters

hidden​

Whether this object is hidden from view.

Type boolean
Format True/False
Default
false
Examples
true
Examples

Hide numberInput.

numberInput.setHidden(true);

Unhide numberInput.

numberInput.setHidden(false);

numberInput.setValue()​

Set the current value.

Definition
numberInput.setValue(value)
Parameters

value​

The value.

Type string | number | boolean | object | array
Examples

Set the current value of numberInput to userValue.

numberInput.setValue(userValue);

numberInput.validate()​

Validates the value of the input field.

Definition
numberInput.validate()
Examples

Validate the value of numberInput.

numberInput.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.

EventDescription
ChangeThe value is changed.