Text Field
文本输入框
WebMobileDesktop上手难度: 容易
一个带边框的框，用户往里面打字。
Live Demo
真的可以点用于接收清理报告，不会对外公开
你刚才看到的这个：注册页的「邮箱」「密码」、搜索框、笔记 App 里点一下弹出键盘的那一行——都是 Text Field。
它到底是什么
Text Field 是最基础的输入组件。好的输入框和差的输入框差别很大：有没有 Label（是「邮箱」还是「请输入您的邮箱地址」）、错误提示出现在哪里、是否支持多行。
输入框text fieldtext inputtextbox单行输入输入栏
Anatomy · 它由什么组成
Label标签
位于上方，说明这里填什么
Container输入框
边框 1px，圆角 8px，高度 44px
Placeholder占位文字
不可替代 Label
Helper Text辅助说明
下方常驻，如密码规则
Error State错误态
红边 + 下方红字说明
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 需要用户输入自由文本 | 用 |
| 输入内容长度可预知且较长 | 用 |
| 需要格式校验（邮箱、手机号） | 用 |
| 选项少于 5 个时 | 不用 |
| 输入内容不应被记录/展示时 | 视情况 |
密码输入框应该用专门的 Password Field，带显示 / 隐藏切换和强度提示。
要求固定格式的数据（日期、选择）应该用专用组件，别让用户手打。
Similar Patterns
别搞混一句话区分：一个带边框的框，用户往里面打字。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个邮箱输入框：上方 Label「邮箱」，下方常驻辅助文字「用于接收通知」，失焦时校验格式，错误时红边 + 下方红字说明。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个能打字的框。
改成这样说
加邮箱 Text Field：上方 Label「邮箱」（placeholder 不能替代 label），blur 时校验，错误时红边 #A8342C + 下方红字说明 + aria-invalid。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。