Input
You might say
Add a field where people can enter their email address.
Let the user enter one line of textUse a text input for an account name, nickname, search query, or anything else that fits on one line. Give it a label that stays visible after typing. If the value is invalid, explain what is wrong and how to fix it near the field.
You can say this to an AI Agent
Add a single-line Recipient name input to checkout and keep its label visible after typing. Test an empty value, a normal name, and a long name, with any error shown beside the field.
Input≠Search input
A search input is an Input with a specific purpose and may include submit, clear, or suggestion behavior. A normal input can collect any short value, such as a name or email.
Input≠Autocomplete
Input accepts text. Autocomplete offers possible matches as someone types.
When to use it
- Account and contact detailsans-studio••••••••Sign in
- Search queries🔍 Search topics you are interested in…
- Short names and titlesNameAlex ChenEmailyou@example.com
- Single-line codes or valuestitle2026 Product Plan v3
When NOT to use it
- Collect a long answer that needs several linesThis component’s interaction design is very thoughtful…
- Use placeholder text as the only labelStatusIn progress
- Wait until final submission to reveal every obvious errorName"Name" disappears after you type.
- Show read-only content in a field that looks editableVersionv2.4.0It looks editable, but it is not.
Anatomy
Email
Used to receive login notifications
Tells users what to enter — never skip it
Highlights its border on focus, turns red on error
Adds format requirements or explains what went wrong
Variants
Default
The go-to shape for most single-line text input
Password
Passwords, keys, and anything that should be masked
With Icon
Search and friends — the icon hints at what to enter
Error
When validation fails — red border plus the reason why
Disabled
This field can't be edited right now
Typical use cases
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check