Text Input
A basic, but highly customizable text field that logs user input from the keyboard. You can use a Text Input component to send messages, form screens, etc.
Adding Text Input component
To add the Text Input component:
- Select the Text Input component from the Components drawer. You can open the list of components by clicking the
+
button next to Components.
By default, the Text Input component includes a placeholder text value.
To change the placeholder text value:
- Select the Text Input component in the Components tree.
- Go to the Configs tab (second tab) in the Properties Panel.
- Modify the value of Placeholder Text property.
Configuration Properties
Basic Configuration
Property | Description |
---|---|
Component name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Text Input. |
Auto Focus | When enabled, the keyboard will open as soon as the screen loads, and the input will immediately be ready to use. |
Disabled | Allows you to disable the input field |
Max length | Allows you to set a maximum number of characters that can be entered into the input. |
Placeholder Text Color | Allows you to set the color of the placeholder text.Text to appear while the text input is blank. |
Password Input | When enabled, the user input is hidden on the screen and is displayed with '●'. |
Clear Button Mode | iOS only. When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. |
Clear Text on Focus | When enabled, all text in the input will be deleted when the input is focused on. |
Enables Return Key Automatically | When enabled, the return key will be disabled until the user inputs text in the field. |
Underline Color | Android Only. Allows you to set the color of the line that appears under text when the user is finished typing. |
Multiple Lines | When enabled, the text will wrap and extend to multiples lines instead of extending past the screen. |
Number of Lines | Only applicable when Multiple Lines is enabled. Allows you to set how many lines the text input will extend to. |
Scroll Enabled | Only applicable when Multiple Lines is enabled. When enabled, the user will be able to scroll through the text they've entered. |
Disable Spell Check | When enabled, a red line will not appear under incorrectly spelled words/words not known to Auto Correct. |
Advanced Configuration
Property | Description |
---|---|
Text Content Type | Allows you to select a content type which informs the system what to expect which prompts it to suggest proper autofill content. |
Auto Correct | When enabled, Auto Correct will check what is being entered in the input. |
Allow Font Scaling | When enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings. |
Auto Capitalize | Allows you to select what type of input will be capitalized. This property is not supported by some keyboard types such as name-phone-pad. |
Hide Caret | When enabled, the cursor in the text input will be hidden. |
Hide Context Menu | When enabled, the context menu will become hidden. |
Editable | Allows you to toggle if the text input is able to be used or not. |
Keyboard Appearance | Determines the color of the keyboard. |
Keyboard Type | Allows you to select the type of keyboard that will appear when the user focuses on the text input. Examples |
Return Key Label | Android only alternative to Return Key Type. |
Return Key Type | Allows you to select the type of return key the user will see. |
Selection Color | Allows you to change the color of the highlight over selected text in the input. |
Select Text on Focus | If enabled, all text will automatically be selected on focus. |
Text Break Strategy | Android Only. Allows you to set how paragraphs of multiple lines will be broken up. |
Data Configuration
Property | Description |
---|---|
Placeholder Text | Text to appear while the text input is blank. |
Data Source | Initialize the stateful component with a value from a data source. |
Triggers
Trigger name | Description |
---|---|
On Change Text | Starts the action when the text is changed |
On Return Key | Starts the action when the Return/Enter key is pressed |
On Focus | Starts the action when the element is focused |
On Blur | Starts the action when the element is blurred/unfocused |
On Change Text Delayed | Starts the action after a given delay from when editing has stopped (debouncing) |
Using Text Input for Password fields
To use a Text Input component as a password field in a form:
- Go to the Configs tab (second tab) in the Properties Panel.
- Enable the Password Input property.
Using Clear Text Input property
To add the ability to clear the Text Input field when a user is typing:
- Go to the Configs tab (second tab) in the Properties Panel.
- Set the Clear Button Mode property's value to
while-editing
from the dropdown menu.
Disable the Auto Capitalize property
To disable the auto-capitalization on a Text Input when logging a user's input on form fields (such as email):
- Go to the Configs tab (second tab) in the Properties Panel.
- Go to Advanced Configuration.
- For Auto Capitalize, select
none
in the dropdown menu.
Reset a Text Input field after a Screen is unfocused
Resetting an input field value when a screen loses its focus from being the current screen to another screen in the app is a UX pattern in a mobile app. The unfocus can happen for a variety of reasons when a user takes an action. The action here can be anything from submitting a form, navigating to a different screen, etc.
Learn more on how to use a Custom Function to reset a Text Input field here
Using a Pre-filled Value
To use the Text Input field with an initial value:
- Go to the Data tab (third tab) in the Properties Panel.
- In the Initial Value property, enter the text.
Styling the Text in the Text Input field
To customize the styles of text in the Text Input field:
- Go to the Styles tab (first tab) in the Properties Panel.
- Under Style section, you can modify Font, Size, Color, etc.
Customize Text Input
To customize the Text Input field:
- Go to the Styles tab (first tab) in the Properties Panel.
- You can now modify Background Color, apply padding, change border radius, border color, etc.
Updated 3 months ago