输入框Input
填写与选择让用户输入一行文字
也常被叫作文本输入框单行输入框
账号、昵称和搜索词这类一行能写完的内容,通常用输入框收集。输入框要有不会随内容消失的字段名称;输入不符合要求时,在附近说明哪里有问题以及怎样修改。
用于接收登录通知,不会公开
邀请码不存在,请检查后重试
容易混淆?这样区分
输入框Input≠搜索输入框
搜索输入框是用途明确的输入框(Input),通常还带提交、清除或搜索建议;普通输入框可以填写姓名、邮箱等各种单行内容。
输入框Input≠自动完成AutoComplete
输入框 Input 只负责接收文字;自动完成 AutoComplete 会根据已经输入的内容给出可选建议。
什么时候用
- 登录、注册:账号密码这类短文本oil-oil••••••••登录
- 搜索:一个关键词走天下🔍 搜索你感兴趣的内容…
- 表单收集信息:姓名、邮箱逐行填姓名林小hu邮箱you@example.com
- 起名字、改标题:精确的短文本编辑标题2026 年产品规划 v3
什么时候不用
- 内容会换行、超过一句 → 用 多行文本域 Textarea这个组件的交互设计得很细致……
- 只能从固定选项里挑 → 用 选择器 Select状态进行中
- 拿 placeholder 当标签,输入后用户忘了要填啥姓名输入后“姓名”两个字就消失了
- 用输入框展示只读内容,让用户误以为可以修改版本v2.4.0用户以为可以改,其实不能
组成结构 · Anatomy
邮箱
用于接收登录通知
1标签Label告诉用户这里填什么,别省
2输入框本体Input聚焦时高亮描边,错误时变红
3辅助说明Help Text补充格式要求或错误原因
常见变体 · Variants
默认Default
绝大多数一行文本输入的通用形态
密码Password
密码、密钥等需要遮挡的内容
带前缀图标With Icon
搜索等场景,用图标暗示要填什么
错误状态Error
校验不通过时,红框配上出错原因
禁用Disabled
这一项暂时不允许用户修改
典型使用场景