# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/component-basics/marketplace-components/advanced-text-input.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.