Text Input
The text input allows the person using your app to type in anything that they want such as words, passwords or numbers.
Text Input Overview
Properties
Text Input
Property | Description | Data Type |
---|---|---|
Hint | The prompt text the user sees when the Text Input is empty (eg. | Text |
Text | Text value of the Text Input | Text |
Keyboard | Set a keyboard to sppear when your end user clicks the Text Input | Select from list |
Secure Text Entry | Toggle whether text is obscured as your end user types (suitable for entering passwords and other sensitive information) | True/False |
Font | Set the font for the Hint and Text properties. Options can be found here: Google Fonts. | Text |
Font Italic (web app only) | Select whether hint and text are shown in italics. | True/False |
Underline (web app only) | Select whether the hint and text are underlined. | True/False |
Strikethrough (web app only) | Apply strikethrough formatting to the hint and text. | True/False |
Writing Direction (iOS and web app only) | Set whether text should be written left-to-right or right-to-left. | Select from icons. |
Font Size | Height of hint and text in pixels. | Number |
Letter Spacing | Spacing between letters in pixels. | Number |
Advanced Properties
Property | Description | Data Type |
---|---|---|
Editable | Toggle whether your end user can edit the text | True/False |
Multiline | Toggle whether your end user can enter multiple lines of text | True/False |
Auto Focus | Toggle whether Text Input is automatically in focus when the Screen opens | True/False |
Max Length (Android and iOS only) | Set maximum number of lines of text your end user can enter | Number |
Clear Button Mode (iOS only) | Toggle when your iOS end users have the option to clear the Text Input's text | Select from list |
Input Color | Color of Text Input's Text | Color |
Background Color | Color of Text Input's background | Color |
Hint Text Color | Color of Text Input's hint | Color |
Selection Color (Android and iOS only) | Set the color to highlight text when your end user selects text | Color |
Layout
Property | Description | Data Type |
---|---|---|
X | Set the location of your Text Input the X-axis in pixels | Number |
Y | Set the location of your Text Input on the Y-axis in pixels | Number |
Height | Set the Height of your Text Input in pixels | Number |
Width | Set the Width of your Text Input in pixels | Number |
Resize Mode | Define dimensions of the text input component/container | Select from list |
Style
Property | Description | Data Type |
---|---|---|
Visible | Toggle whether your end users can see the Text Input | True/False |
Border Style | Style of Text Input's border | Select from list |
Border Color | Color of Text Input's border | Color |
Border Width | Width of Text Input's border in pixels | Number |
Border Radius | Radius of corners of Text Input's border in pixels | Number |
Shadow Color | Color of Text Input's shadow | Color |
Shadow Opacity | Opacity of Text Input's shadow | Number between 0 and 100 |
Shadow Radius | Radius of corners of Text Input's shadow in pixels | Number |
Shadow Offset | How far Text Input's shadow should be offset, in Height and Width, in pixels | Number |
Blocks
Events
Click
This event fires when the user clicks on the Text Input component.
Unfocus
This event fires when the component looses focus, i.e the user clicks on another component.
Submit
This event fires when the enter or submit button is pressed on the device keyboard.
Changes
This event fires every time a character is added or removed to the Text Input.
Properties
Border Width
Set and get the Text Input's border width.
Height
Returns the height of the Text Input component in pixels after it has been rendered on-screen.
Hint
Set and get the Text Input's Hint text.
Keyboard Type
Set and get the Text Input's keyboard type.
Text
Set and get the Text Input's Text.
Visible
Set and get the Text Input's visibility.
Width
Returns the width of the Text Input component in pixels after it has been rendered on-screen.
Last updated