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.
|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
|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.|
|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.|
Updated 7 months ago