Advanced Text Input

A standard text input field with 5 input types — Normal, Lowercase, Password, Email, and Number. Supports single-line and multi-line modes, customizable borders, background, shadow, and placeholder styling. The foundation of any form or data entry screen.

Getting Started

Add the Text Input to your screen. You will see a single-line text field with a light border and Enter Text placeholder. Choose the Type that matches your use case (e.g., Email for email fields, Password for secure entry), set a descriptive Placeholder, and optionally set a Default Value to pre-fill the field.

Settings

Text Input

• Type — Choose the input behavior: Normal (standard text), Lowercase (forces lowercase input), Password (masks characters with dots), Email (shows email keyboard on mobile), or Number (shows numeric keyboard on mobile).

• Placeholder — The hint text shown when the field is empty. Defaults to "Enter Text". Use something descriptive like "Enter your email" or "Type a message".

• Default Value — Pre-fill the field with a value. Use Magic Text to pull data from your database (e.g., the current user's name for an edit profile screen).

• Max Length — Limit the number of characters the user can type. Set to 0 for unlimited.

• Auto-focus — Toggle on to automatically focus this input when the screen loads, opening the keyboard immediately.

• Multi-line — Toggle on to allow the input to accept multiple lines of text (like a textarea). Use this for comments, descriptions, or any long-form text.

• Padding — Inner spacing between the text and the input border. Default is 8 pixels.

• Font Color — Color of the text the user types.

• Placeholder Color — Color of the placeholder hint text. Default is a light grey (#a9a9a9).

• Background — Toggle on to show a filled background behind the input field.

• Background Color — The fill color of the input background. Only appears when Background is on.

• Border — Toggle on to show a border around the input field.

• Border Color — Color of the border. Only appears when Border is on.

• Size — Thickness of the border in pixels. Default is 1. Only appears when Border is on.

• Line — Border style: Solid, Dashed, or Dotted. Only appears when Border is on.

• Opacity — Overall opacity of the input, from 0 (invisible) to 100 (fully visible). Default is 100.

• Rounding — Corner rounding of the input, from 0 (sharp) to 100 (fully rounded). Default is 4.

• Shadow — Toggle on to add a subtle drop shadow beneath the input.

Tips & Best Practices

• Always set a descriptive Placeholder that tells users exactly what to enter — "Enter your email address" is much better than "Enter Text".

• Use Password type for any sensitive field like passwords or PINs to mask the input.

• Use Email type for email fields — it shows the @ symbol on the mobile keyboard, making entry faster and reducing typos.

• Enable Multi-line for comment boxes, feedback forms, and any field where users need to write more than a single line.

• Set Auto-focus on the primary input field of a screen (like a search bar or the first form field) so users can start typing immediately.

• Use a visible Border or Background (or both) so the input field is clearly distinguishable from the rest of the screen. An invisible input confuses users.

Example Use Cases

• Login Form: Two text inputs — one with Email type for the username, one with Password type for the password. Both with borders and descriptive placeholders.

• Comment Box: A multi-line text input with a larger height for users to write reviews, feedback, or messages.

• Search Bar: A single-line text input with auto-focus, a search icon placeholder, rounded corners, and a light background.