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.

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


Component nameTo 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 Colorto set color of borders of text field.
Max LengthAllows you to set a maximum number of characters that can be entered into the input.
Placeholder Text ColorAllows you to set the color of the placeholder text.
Assistive textHelper text to be displayed underneath the area/field, useful for providing additional instructions.
Left icon nameThe name of the icon selected from the icon picker to be displayed on the left.
Password FieldWhen enabled, the user input is hidden on the screen and is displayed with '●'.
Auto FocusWhen enabled, the keyboard will open as soon as the screen loads, and the input will immediately be ready to use.
DisabledWhen enabled, the user will not be able to input any text and the area/field will be grayed out.
Left icon modeAllows 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 nameThe name of the icon selected from the icon picker to be displayed inset on the right.
AppearanceThe appearance of the area/field.

Available values: sold or underlined.
Underline ColorSets color of the Underline of the text.
Web OutlineBy 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.


Return Key LabelAndroid only alternative to Return Key Type.
Auto CorrectWhen enabled, Auto Correct will check what is being entered in the input.
Return Key TypeAllows you to select the type of return key the user will see.
Selection ColorAllows you to change the color of the highlight over selected text in the input.
Select Text on FocusIf enabled, all text will automatically be selected on focus.
Allow Font ScalingWhen enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings.
Auto CapitalizeAllows 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 CaretWhen enabled, the cursor in the text input will be hidden.
Hide Context MenuWhen enabled, the context menu will become hidden.
EditableAllows you to toggle if the text input is able to be used or not.
Keyboard AppearanceDetermines the color of the keyboard.
Keyboard TypeAllows you to select the type of keyboard that will appear when the user focuses on the text input. Examples

Data Configuration

Placeholder TextPlaceholder text to display in the area/field when the user has not entered any text of their own.
LabelAllows you to add a label over the field.
ErrorAllows you to add an error label over the field.
Initial valueInitialize 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.


Trigger nameDescription
On Change TextStarts the action when the text is changed
On Return KeyStarts the action when the Return/Enter key is pressed
On FocusStarts the action when the element is focused
On BlurStarts the action when the element is blurred/unfocused
On Change Text DelayedStarts the action after a given delay from when editing has stopped (debouncing)