The Editable Number component for Retool Apps
A click-to-edit input field to enter a number.
Editable Number functions similarly to Number Input but renders as plain text until clicked.
Settings
Editable Number includes the following configurable options when building apps in the IDE.
Properties
All properties for Editable Number with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.
decimalPlaces
The number of decimal places to display. If necessary, values round up or down automatically.
formDataKey
The key used by a Form component to assign default values to input fields using form.initialData
, and to construct the form.data
property.
global
Whether the object is globally scoped for use in all app pages.
Whether the component is visible.
Whether to hide the validation message if the invalid
is true
.
iconBefore
The prefix icon to display.
Values
id
The unique identifier.
inputTooltip
The tooltip text to display.
invalid
Whether the value has failed any validation rules.
isHiddenOnDesktop
Whether the component is visible in the desktop layout.
isHiddenOnMobile
Whether the component is visible in the mobile layout.
labelAlign
The horizontal alignment of the label.
Values
labelCaption
The label for the node.
labelWidth
The label width, in the unit specified in labelWidthUnit
.
labelWidthUnit
The specified units for labelWidth
, if labelPosition
is left
.
Values
maintainSpaceWhenHidden
Whether the component takes up space on the canvas if hidden
is true
.
padDecimal
Whether to include trailing zeros to match the specified value for decimalPlaces
.
placeholder
The text to display within the input field when there is no value.
pluginType
The plugin type.
preventScroll
Whether to prevent scrolling behavior from changing the input value.
showInEditor
Whether to remain visible in the editor if hidden
is true
.
showSeparators
Whether the formatted value includes a localized thousands separator.
showStepper
Whether the input field includes buttons to adjust the value incrementally.
textBefore
The prefix text to display.
tooltipText
The tooltip text to display.
validationMessage
The validation message to display if invalid
is true
.
Methods
JavaScript API methods for interacting with Editable Number. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.
clearValidation
Clear the validation message from the input field.
component.clearValidation()
clearValue
Clear the current values.
component.clearValue()
focus
Set focus on the input field.
component.focus()
resetValue
Reset the current value to the default value.
component.resetValue()
scrollIntoView
Scrolls the canvas or parent container so that the selected component appears in the visible area.
component.scrollIntoView(scrollIntoViewOptions)
Parameters
setHidden
Set the hidden
value to toggle whether the component is visible. Defaults to true
without a parameter.
component.setHidden(hidden)
Parameters
setValue
Set the current value.
component.setValue(value)
Parameters
Events
Events are triggered by user interactions, such as clicking a button or entering a value. Use event handlers to trigger queries or other actions in response to events.
blur
The input field is blurred.
change
The value is changed.
focus
The input field is focused.