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