Styled Text Area

Styled Text Area

A Text input field that allows user to log their inputs in multi-lines. The Text Area expands vertically as needed, making it better equipped for large amounts of user input.

Adding Styled Text Areal

  • Select the Styled Text Area component from the Components drawer. You can open the list of components by clicking the + button next to Components.
  • Then, add the Styled Text Area component from the Components tree.
  • Go to the Data tab (third tab) in the Properties Panel.
  • For the Label property, add a string to display above the text field.

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 Styled Text Area.

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

Appearance

Appearance of the area/field.

Available values: sold or underlined.

Auto Focus

When enabled, the keyboard will open as soon as the screen loads, and the input will immediately be ready to use.

Default Value

Default text to appear as the value of the component.

Disabled

When enabled, the user will not be able to input any text and the area/field will be grayed out.

Max Length

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

Placeholder Text

Placeholder text to display in the area/field when the user has not entered any text of their own.

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 '●'.

Assistive text

Helper text to be displayed underneath the area/field, useful for providing additional instructions.

Left icon name

The name of the icon selected from the icon picker to be displayed on the left.

Left icon mode

Allows you to select the placement of the left icon, if one is selected. Inset displays the icon inside the border of the area/field and outset displays the icon outside of the area/field.

Right icon name

The name of the icon selected from the icon picker to be displayed inset on the right.

Number of lines

Allows you to set how many lines the text input will extend to.

The default value is 4.

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

Label

Allows you to add a label over the field.

Error

Allows you to add an error label over the field.

Initial value

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


Did this page help you?