用途:Search Field 模式用于让用户通过一个清晰的输入框快速检索内容或命令,适合站内内容搜索、表格与列表的范围过滤、命令或对象快速查找。
主要能力:提供清晰的输入、合理默认值和即时恢复路径,在不隐藏状态、规则与恢复路径的前提下减少操作摩擦。
使用方式:先确认该模式与问题和约束匹配,再从 references/pattern.md 的解剖结构与示例出发,选择最小可行变体;先应用无障碍、性能和交互护栏,再做视觉打磨;最后按测试指引验证键盘、屏幕阅读器、响应式与失败场景。
无障碍要点:确保仅用键盘即可完成搜索;打开、更新或显示额外 UI 时保持焦点顺序合理;保留在高倍缩放下仍可读的可见焦点状态;优先使用语义元素,仅在语义不足时补充 ARIA;在正确位置以恰当礼貌级别播报错误、加载或完成等状态变化;用 aria-describedby 或结构标题关联标签、提示与状态文本;不要仅靠颜色传达严重程度、完成或选中状态。
常见错误:对部分输入立即校验会显得苛刻且嘈杂,应等用户输入足够信息后,再按规则风险在失焦、暂停或提交时校验;标签、提示与错误信息视觉分离会让人无法判断归属,应紧密分组并用 aria-describedby 关联;只做桌面样式会忽略移动键盘、自动填充与粘贴流程的差异,应在完成前测试自动填充、粘贴、缩放和屏幕键盘。
限制:当取值是二元、极小或完全受限时,应使用更简单的原生控件;若原生浏览器输入已能很好解决主要任务,避免自定义行为;若产品无法从中受益,不要添加额外格式化或校验。完整实现细节、示例与测试说明见 references/pattern.md,模式页面为 https://uxpatterns.dev/patterns/forms/search-field。