Text Input Component
The text input allows the person using your app to type in anything that they want such as words, passwords or numbers.
Property | Description | Data Type |
|---|---|---|
Hint | The prompt text the user sees when the Text Input is empty (eg. Type Here) | 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 [default, email address, numeric, phone pad] |
Secure Text Entry | Toggle whether text is obscured as your end user types (suitable for entering passwords and other sensitive information) | True/False |
Font | 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 |
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 [never, while-editing, unless-editing, always] |
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 |
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 [Stretch, Float in Place] |
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 [solid, dotted, dashed] |
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 |
This event fires when the user clicks on the Text Input component.
This event fires when the component looses focus, i.e the user clicks on another component.
This event fires when the enter or submit button is pressed on the device keyboard.
This event fires every time a character is added or removed to the Text Input.
Returns the height of the Text Input component in pixels after it has been rendered on-screen.
Returns the width of the Text Input component in pixels after it has been rendered on-screen.
Last modified 1mo ago