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.
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.
Configuration Properties
Basic
Property | Description |
---|---|
Component name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Styled Text Area. |
Auto Focus | When enabled, the keyboard will open as soon as the screen loads, and the input will immediately be ready to use. |
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 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. |
Appearance | The appearance of the area/field. Available values: sold or underlined. |
Number of lines | Allows you to set how many lines the text input will extend to. The default value is 4 . |
Web Outline | By 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 |
---|---|
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. |
Data Configuration
Property | Description |
---|---|
Placeholder Text | Placeholder text to display in the area/field when the user has not entered any text of their own. |
Label | Allows you to add a label over the field. |
Error | Allows you to add an error label over the field. |
Data Source value | Initialize 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 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) |
Setting the field label
- Go to the Data tab (third tab) in the Properties Panel.
- For the Label property, add a string to display above the text field.
Updated 4 months ago