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.
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 detailsoil-oil••••••••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
Further reading