Text Field
文本输入框
A bordered box the user types into — the most basic input control there is, and the one whose quality varies the most.
Live Demo
Actually clickableUsed to send your cleanup report. Never shown publicly.
What you just saw:The "Email" and "Password" fields on a sign-up page, a search box, the single line that pops up the keyboard when you tap it in a notes app — all Text Fields.
What it actually is
The Text Field is the most fundamental input component. Good ones and bad ones differ in ways that are easy to miss: whether there is a real label ("Email" or "Enter your email address"), where the error message appears, and whether the field grows to hold multiple lines.
Anatomy · What it's made of
Label标签
Sits above the field and says what belongs here
Container输入框
1px border, 8px radius, 44px tall
Placeholder占位文字
Never a substitute for the label
Helper Text辅助说明
Always-on text below, e.g. the password rules
Error State错误态
Red border plus red explanatory text below
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The user needs to enter free-form text | Yes |
| The expected input is long but its length is predictable | Yes |
| The value needs format validation (email, phone number) | Yes |
| There are fewer than 5 options | No |
| What the user types should not be logged or displayed | Depends |
Password entry belongs in a dedicated Password Field with a show/hide toggle and strength feedback.
Data with a fixed format (dates, choices) should use a purpose-built control instead of making the user type it.
Similar Patterns
Don't mix these upText FieldCurrent
文本输入框
A bordered box the user types into — the most basic input control there is, and the one whose quality varies the most.
Text Area
多行输入框
A text field that wraps onto multiple lines, for content that runs longer than a sentence.
In one line:A bordered box the user types into — the most basic input control there is, and the one whose quality varies the most.
Text Area
多行输入框
A text field that wraps onto multiple lines, for content that runs longer than a sentence.
Search Field
搜索框
An input box built purely for finding things, usually with a magnifier icon and a clear button.
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
Inline Validation
即时校验
Tell the user while they type whether the value is right, instead of waiting until they submit.
How to tell AI
Three levels of promptAdd the component name and specifics
Add an email field: a Label reading "Email" on top, always-on helper text "Used to receive notifications" below, format validation on blur, and on error a red border with red explanatory text underneath.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a box people can type in.
Say this instead
Add an email Text Field: a Label reading "Email" on top (the placeholder must not replace the label), validation on blur, and on error a #A8342C border + red explanatory text below + aria-invalid.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.