YL
FORM & INPUT

表单与输入 UI 设计模式

表单与输入(Form & Input)分类收录 12 种常用界面模式:浮动标签输入、图标前后缀输入、内联校验状态、验证码格子输入、分步表单、开关等,每条含中英文学名、效果预览与可复制的 AI 设计提示词。

表单与输入

Form & Input

12 条

浮动标签输入

Floating Label Input

输入框浮动标签表单Material

标签一开始待在占位符的位置,聚焦或输入后缩着升到边框上,一个元素干两个活。

图标前后缀输入

Icon Affix Input

输入框图标前后缀表单

输入框内嵌前置图标和后缀提示(如域名、单位、显隐密码的眼睛)。

内联校验状态

Input Validation States

校验错误表单状态

输入框自己在边框上报告状态:绿框对勾是合法,红框加一行小字说明错在哪。

验证码格子输入

OTP / PIN Input

验证码OTP安全输入

几位数字各占一格,输入完自动跳下一格,粘贴时自动分拆——安全感的具象化。

分步表单

Multi-step Wizard

分步向导步骤条长表单

长表单拆成几步,顶部步骤条显示进度,每步只问 3-5 个问题。

开关

Toggle Switch

开关切换设置布尔

一颗滑块在轨道里左右滑动,开是绿色关是灰色——比复选框更"物理"的布尔选择。

自定义勾选框

Custom Checkbox & Radio

勾选复选框单选表单

重绘的勾选框:选中时品牌色填充 + 白色对勾弹出,单选用内圆表示。

区间滑块

Range Slider

滑块区间数值定价

拖动滑块选一个数值,上方浮着当前值气泡,已滑过部分填充品牌色。

拖拽上传区

Dropzone

上传拖拽文件表单

一圈虚线框住的上传区,拖文件悬停时整块变色——"放这儿就行"的直觉设计。

自动补全输入

Combobox / Autocomplete

联想补全下拉输入

输入时下方浮出匹配项列表,选中项回填输入框——输入和选择二合一。

搜索下拉高亮

Search with Highlighted Results

搜索高亮下拉联想

搜索框下方实时给出结果,命中的关键词在结果里高亮加粗。

星级评分输入

Star Rating Input

评分星级评价输入

五颗星从灰变琥珀,悬停时预览、点击后定格,星星还会微微弹一下。