输入框
Input
初级通用输入框（Input）是让用户输入或修改内容的表单控件，这里主要指填写单行文字的输入框。它解决了产品如何收集简短信息的问题，例如让用户填写邮箱地址，以便创建账号或接收通知。
你可能会说：「帮我做一个让用户填写邮箱地址的地方，能输入和修改，填错了也能看出问题。」
动手看看邮件订阅的邮箱输入框
每周慢思精选留下邮箱，每周五收到一封知识精选。
邮箱地址
例如 name@example.com
仅用于发送精选邮件，随时可以退订。
演示中的邮箱内容由下方参数切换。
邮箱内容与可用状态
悬停邮箱框，再用 Tab 聚焦：边框预告可交互，焦点环标出键盘操作位置。下方参数切换示例内容，不模拟真实录入。
浅色占位文字只是格式示例，不是已经填写的值。上方的“邮箱地址”常驻，内容变化后仍能看懂这里要填什么。
要点一个输入框怎样让人顺利填完？
- 1
先说清楚要填写什么
你做注册页时，可以在输入框旁标明“邮箱地址”。因为用户需要知道这里收集什么，不能只靠框里的示例文字：示例会随着输入消失，回头检查时也帮不上忙。
- 2
让输入状态看得见
用户点进输入框后，我们通常会让聚焦状态清晰可见，这样他知道文字会填到哪里。已有内容也要方便修改；如果输入不符合要求，就在附近说明问题和修改方向。
- 3
把输入结果接到后续流程
输入框负责接收内容，不等于内容已经保存。比如用户填写项目名称后，我们还要决定何时校验、点击哪个按钮提交，以及提交失败时是否保留刚才输入的文字。
容易混淆的地方
输入框是用户实际打字的控件；表单字段的范围更大，还包括它的名称、提示和错误信息，所以你说“加一个字段”时，AI 可能需要做的不止一个框。多行文本框适合写较长内容，而这里说的输入框主要用于单行文字；网页里的 input 元素也能实现其他输入类型，不能把两者完全画等号。
什么时候用
适合用
- 做注册页时，让用户填写邮箱或用户名，因为这些信息需要由用户提供，且通常只占一行。
- 做后台设置页时，让管理员修改项目名称，并在保存前检查内容是否为空。
- 做 AI 工具时，让用户填写一个简短的会话标题，方便之后在历史记录中查找。
不适合用
- 让用户写一段较长的产品需求时，单行输入框会让编辑和回看都很费劲，改用多行文本框。
- 让用户从固定的几个权限级别中选一个时，不需要自由输入，改用单选框或选择器，减少无效值。
- 只是展示已经保存的订单编号、并不允许修改时，用普通文本展示即可，不必放进输入框。
练一练选一个答案，看看解释
你在做一个项目设置页：用户需要修改项目名称，名称通常只有十几个字。哪种做法最贴合这个需求？
让 AI 帮你做复制给 AI Agent 直接用
请在项目设置页添加一个填写项目名称的单行输入框，旁边清楚标明“项目名称”。用户可以修改现有名称；点击保存时检查是否为空，出错就在输入框附近说明原因，并保留已输入的内容。