Styled Text Field
The Styled Text Field is a single line and gives you the ability to add labels for each Text Field.
Adding Styled Text Field
- Select the Styled Text Field component from the Components drawer. You can open the list of components by clicking the
+
button next to Components. - Then, add the Styled Text Field 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. For Text Field, it defaults to Styled Text Field. |
Active Border Color | to set color of borders of text 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. |
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. |
Password Field | When enabled, the user input is hidden on the screen and is displayed with '●'. |
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. |
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. |
Underline Color | to set color of the Underline of the text. |
Advanced Configuration
Property | Description |
---|---|
Return Key Label | Android only alternative to Return Key Type. |
Auto Correct | When enabled, Auto Correct will check what is being entered in the input. |
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. |
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 |
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. |
Initial value | Initialize the stateful component with a value from a data source. |
Updated 4 months ago