Text Input
UI ComponentsA single-line form field that allows users to enter and edit text, such as names, emails, or search queries.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Text Input coming soon.
How It Works in Apps/Websites
Text inputs capture user-entered text data. They consist of: a border/container, optional label above, placeholder text inside when empty, and optional helper text below. States change based on interaction (focus, error, disabled). Can include icons (left for type indication, right for actions like clear).
How AI Interprets This Term
When you say 'text input', AI expects: a rectangular field with border, ~40-48px tall, with placeholder text inside. Label text above, optional helper text below. Focus state shows accent-colored border. May have leading icon (search, email) or trailing icon (clear, visibility toggle).
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a text input for entering an email address
Design a text input component: outlined style with 1px gray border, 44px height, 16px padding, 14px font. Label above in gray, input shows placeholder 'Enter your email'. Focus state: blue border, blue label. Error state: red border, red label, error message below.
Show outlined vs filled vs underlined text input styles
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Single-line text entry
- •Short form fields
- •Search queries
- •Name, email, phone inputs
When NOT to Use
- •Multi-line content (use textarea)
- •Selecting from options (use dropdown)
- •Yes/no choices (use checkbox)