Skip to main content

The Text Input component for Retool Mobile

An input field to enter a single line of text.

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.

autoCapitalize

The type of automatic capitalization that the browser can automatically perform when using virtual or on-screen keyboards.

Type string
Format Plain Text
Mutability
ControlUsage
Retool UI Inspector > Interaction > Advanced
Allowed Values
ValueDescription
none

No capitalization.

sentences

Capitalize sentences.

words

Capitalize words.

characters

Capitalize characters.

Default
none
Examples
"words"

disabled

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

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

hidden

Whether this object is hidden from view.

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

iconAfter

The suffix icon to display.

Type string
Format Icon Key
Mutability
ControlUsage
Retool UI Inspector > Content > Add-ons
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
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
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

maxLength

The maximum number of characters to allow.

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

minLength

The minimum number of characters to allow.

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

pattern

A regular expression (regex), without forward slashes around the pattern, to validate input if patternType is regex.

Type string
Format Regular Expression
Mutability
ControlUsage
Retool UI Inspector > Interaction > Validation rules
Default
null
Examples
^[a-zA-Z0-9]+$

patternType

The pattern with which to validate the input.

Type string
Format Plain Text
Mutability
ControlUsage
Retool UI Inspector
Allowed Values
ValueDescription
email

Email address.

regex

Regular expression statement.

url

URL.

Default
null

placeholder

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

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

showCharacterCount

Whether to display a character count with the input field.

Type boolean
Mutability
ControlUsage
Retool UI Inspector

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.

textInput.clearValidation()

Clear the validation message from the input field.

Definition
textInput.clearValidation()
Examples

Clear the validation message from textInput.

textInput.clearValidation();

textInput.clearValue()

Clear the current values.

Definition
textInput.clearValue()
Examples

Clear the current value of textInput.

textInput.clearValue();

textInput.focus()

Set focus on the input field.

Definition
textInput.focus()
Examples

Set focus on textInput.

textInput.focus();

textInput.resetValue()

Reset the current value to the default value.

Definition
textInput.resetValue()
Examples

Reset the current value of textInput.

textInput.resetValue();

textInput.setDisabled()

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

Definition
textInput.setDisabled(disabled)
Parameters

disabled

boolean

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

Examples

Disable textInput.

textInput.setDisabled(true);

Enable textInput.

textInput.setDisabled(false);

textInput.setHidden()

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

Definition
textInput.setHidden(hidden)
Parameters

hidden

boolean

Whether this object is hidden from view.

Examples

Hide textInput.

textInput.setHidden(true);

Unhide textInput.

textInput.setHidden(false);

textInput.setValue()

Set the current value.

Definition
textInput.setValue(value)
Parameters

value

string | number | boolean | object | array

The value.

Examples

Set the current value of textInput to userValue.

textInput.setValue(userValue);

textInput.validate()

Validates the value of the input field.

Definition
textInput.validate()
Examples

Validate the value of textInput.

textInput.validate();

Events

Events triggered by user interactions. Use event handlers to trigger queries or other actions in response to events.

change

The value is changed.


suffixIconPress

A suffix icon is pressed.


submit

The value is submitted.


focus

The input field is selected.


blur

The input field is deselected.