Text Area
The Text Area component helps create multi-line text inputs.
Adding Text Area component
To add the Text Area component:
- Select the Text Area component from the Components drawer. You can open the list of components by clicking the
+
button next to Components.
By default, the Text Area component includes a placeholder text value.
To change the placeholder text value:
- 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.
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 Area. |
Password Input | When enabled, the user input is hidden on the screen and is displayed with '●'. |
Number of Lines | Only applicable when Multiple Lines is enabled. Allows you to set how many lines the text area will extend to. |
Multiline | When enabled, the text will wrap and extend to multiple lines instead of extending past the screen. |
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. |
Advanced Configuration
Property | Description |
---|---|
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. |
Aligns text on the vertical axis | to set text alignment vertically. ('auto', 'top', 'bottom', 'center') Default is 'auto' Note: This Prop Setting works for Android only. |
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
Property | Description |
---|---|
Placeholder Text | Text to appear while the Text Area is blank. |
Data Source | Initialize the stateful component with a value from a data source. |
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.
Updated about 1 year ago