输入框
Input
别名:输入框文本输入框文本框输入栏表单输入框单行输入框
这是什么
用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
交互实验室
试一试，再决定怎么用修改邮箱、切换外观，尝试清空和错误输入，再保存偏好。
正在加载实验室…
使用时关注什么
- 01占位符不能代替标签；错误必须说明如何修正。
- 02清空后焦点留在输入框，方便继续输入。
从参考到实践
AI 生成的视觉参考 · 点击查看完整图集
✓ 适用场景
- 收集用户名、邮箱、标题等单行短文本
- 表单校验需要即时反馈错误与格式提示
- 搜索等需要前后缀图标或清除按钮的场景
✕ 不适用场景
- 长段落、简介等多行内容，改用 textarea
- 选项固定且少于 5 个，用 radio 或 select 更高效
- 需要复杂格式编辑（富文本、日期），用专用组件
常见形式
描边
Outline
边框包裹，最通用
填充
Filled
浅灰底无边框，Material 常用
带前后缀
With addons
内嵌图标与清除按钮
下划线
Underline
仅保留下边线，不使用圆角与填充底色；标签始终可见。
实现要点
borderoutlinebox-shadow: ringtransition基础样式是 border + rounded + px，focus 时叠加 accent 色描边（box-shadow 实现， 不改动布局）；错误态切换 border 与提示文字颜色。清除按钮用绝对定位内嵌右侧。 高度控制在 36～44px，placeholder 用低对比灰。始终配 label 或 aria-label。
平台 API
<input>typerole="textbox"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
相关概念
用一块可多行增长的输入区收集长文本，如简介、备注、留言与反馈。 支持手动或自动增高，常配字数统计与提交按钮；超出上限时计数变红提醒， 内容换行显示而非溢出截断。
组件相似概念用收起的单行控件承载一组互斥选项，点击展开面板后选择其一，选中值常驻显示在触发器上。 比 radio 更省空间，适合选项多于 5 个的场景；面板支持滚动、分组或搜索，选择即关闭。
组件相似概念在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式搭配使用用即时过滤把大列表缩到与当前输入相关的一小部分：用户在搜索框敲字，列表随之实时收窄， 并显示命中数量与空结果提示。它把"查找"变成"修剪"，不用提交、不用等跳转，反馈就在眼前。
交互模式搭配使用