Time Input 是一个以结构化方式捕获时间值的 UX 模式，主要解决时间格式、区域设置和精度上的歧义问题。
用途 该模式帮助团队创建可靠的时间输入方式，最适用于需要可用性与排程的场景。典型使用场景包括：可用性与排程、预约时间窗口、班次或提醒配置。
何时避免使用 当值本身是二元的、极小的或完全受限时，应使用更简单的原生控件。当原生浏览器输入已经能很好地解决主要任务时，避免自定义行为。如果产品无法从额外格式化或校验中获益，则不要添加。
实现工作流
- 在复制示例前，先确认该模式是否匹配问题与约束。
- 从 references/pattern.md 中的解剖和示例开始，然后选择最小的可行变体。
- 在叠加视觉打磨之前，先应用无障碍、性能和交互护栏。
- 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍护栏 键盘交互：验证时间输入可以仅用键盘完成；当模式打开、更新或显示额外 UI 时保持焦点顺序合乎逻辑；保留在高缩放级别下仍可读的可见焦点状态。 屏幕阅读器支持：优先使用语义元素，仅在语义不足时添加 ARIA；在正确位置以正确的礼貌程度宣布错误、加载或完成等状态变化；在有用时通过 aria-describedby 或结构化标题连接标签、提示和状态文本。 视觉无障碍：不要仅依靠颜色来传达严重程度、完成或选择状态。
常见错误
- 使用错误的校验时机：对部分输入立即校验会让模式显得惩罚性和嘈杂。修复方法是等待用户在该字段中有足够信息后，再根据规则风险在失焦、暂停或提交时校验。
- 分离标签、提示和错误：当文案在视觉上分离时，人们无法判断哪条消息属于哪个控件。修复方法是保持标签、辅助文本和校验消息紧密分组，并在适当处用 aria-describedby 连接。
- 忘记触摸和自动填充行为：仅桌面端的样式会掩盖移动键盘、自动填充和粘贴流程行为不同的事实。修复方法是在宣布模式完成前，用自动填充、粘贴、缩放和屏幕键盘测试该控件。
相关模式 https://uxpatterns.dev/patterns/forms/date-input https://uxpatterns.dev/patterns/forms/date-picker https://uxpatterns.dev/patterns/forms/form-validation
完整实现细节、示例和测试说明见 references/pattern.md。 模式页面：https://uxpatterns.dev/patterns/forms/time-input