Text Area

The Text Area component helps create multi-line text inputs.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Component Specific Styles

Property

Description

Placeholder Text Color

Allows you to set the color of the placeholder text

Selection Color

Allows you to change the color of the highlight over selected text in the input.

Aligns text on the vertical axis

Set text alignment vertically.
('auto', 'top', 'bottom', 'center')
Default is 'auto'

Note: This Prop Setting works for Android only.

Configuration Properties

Basic

PropertyDescription
Component nameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Text Area.
Password InputWhen enabled, the user input is hidden on the screen and is displayed with '●'.
Number of LinesOnly applicable when Multiple Lines is enabled. Allows you to set how many lines the text area will extend to.
MultilineWhen enabled, the text will wrap and extend to multiple lines instead of extending past the screen.
Auto FocusWhen enabled, the keyboard will open as soon as the screen loads, and the input will immediately be ready to use.
DisabledAllows you to disable the input field
Max lengthAllows you to set a maximum number of characters that can be entered into the input.
Web OutlineBy default, web browsers add a colored outline to many input components when they're focused for accessibility reasons. When enabled, the outline will be shown.

Advanced

Property

Description

Return Key Type

Allows you to select the type of return key the user will see.

Select Text on Focus

If enabled, all text will automatically be selected on focus.

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 area will be hidden.

Hide Context Menu

When enabled, the context menu will become hidden.

Editable

Allows you to toggle if the text area 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 area. Examples

Return Key Label

Android only alternative to Return Key Type.

Data Configuration

PropertyDescription
Placeholder TextText to appear while the Text Area is blank.
Data SourceInitialize the stateful component with a value from a data source.

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

Trigger nameDescription
On Change TextStarts the action when the text is changed
On Return KeyStarts the action when the Return/Enter key is pressed
On FocusStarts the action when the element is focused
On BlurStarts the action when the element is blurred/unfocused
On Change Text DelayedStarts the action after a given delay from when editing has stopped (debouncing)

Change the placeholder text

  • Select the Text Area component in the Components tree.
  • Go to the Data tab (3rd tab) in the Properties Panel.
  • Modify the value of Placeholder Text property.

Disable the Auto Capitalize property

To disable the auto-capitalization on a Text Area 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.

Using a Pre-filled Value

To use the Text Area 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 Area

To customize the styles of text in the Text Area:

  • Go to the Styles tab (first tab) in the Properties Panel.
  • Under the Style section, you can modify Font, Size, Color, etc.

Customize Text Area

To customize the Text Area:

  • Go to the Styles tab (first tab) in the Properties Panel.
  • You can now modify the Background Color, apply padding, change border radius, border color, etc.