用途:Toggle 模式用于在两种状态之间切换,帮助团队可靠地开关某个二元设置,并让当前状态在交互前后都清晰可见。它最适合设置与偏好类场景。
主要能力:提供开关二元设置的可靠方式,减少操作摩擦,同时不隐藏状态、规则或恢复路径。适用场景包括设置与偏好、功能启用、通知或隐私控制。
使用方式:先确认该模式与问题和约束匹配,再参考 references/pattern.md 中的结构与示例,选择最小可行变体;在叠加视觉细节前先应用无障碍、性能和交互护栏,并用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
限制与避免:当值只是简单的开或关时,设置和表单优先使用原生 checkbox 输入;仅当控件表示播放/暂停、显示/隐藏等动作状态时,才使用带 aria-pressed 的按钮;若产品无法从中获益,不要添加额外格式化或验证。
无障碍要点:确保仅用键盘即可完成切换,保持焦点顺序合理,保留在高倍缩放下仍可读的可见焦点状态;优先使用语义元素,仅在语义不足时补充 ARIA;在正确位置以恰当礼貌程度播报错误、加载或完成等状态变化;不要仅靠颜色传达严重程度、完成或选中状态。
常见错误:对部分输入立即验证会显得苛刻且嘈杂,应等用户提供足够信息后,再根据规则风险在失焦、暂停或提交时验证;标签、提示和错误信息应紧密分组,并在适当处用 aria-describedby 连接;不要只做桌面端样式,需在自动填充、粘贴、缩放和屏幕键盘下测试。
相关模式:button、checkbox、radio。完整实现细节、示例和测试说明见 references/pattern.md,模式页面为 https://uxpatterns.dev/patterns/forms/toggle。