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.

Field Name

The name of the value of the component used on the onChangeText function to log user input.

The value of this property is typically used when submitting data to an API using an HTTP POST/PATCH/PUT request.

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.

Underline Color

Android Only. Allows you to set the color of the line that appears under text when the user is finished typing.

Max length

Allows you to set a maximum number of characters that can be entered into the input.

Clear Text on Focus

When enabled, all text in the input will be deleted when the input is focused on.

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.

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

Placeholder Text

Text to appear while the text input is blank.

Placeholder Text Color

Allows you to set the color of the placeholder text.

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.

Enables Return Key Automatically

When enabled, the return key will be disabled until the user inputs text in the field.

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.

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.

Text Break Strategy

Android Only. Allows you to set how paragraphs of multiple lines will be broken up.

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.

Auto Correct

When enabled, Auto Correct will check what is being entered in the input.

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.

Data Configuration

Property

Description

Initial value

Initialize the stateful component with a value from a data source.

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.

Did this page help you?