职责与结构
开关用于立即生效的二元设置。需要随表单提交的勾选项使用复选框；三种及以上状态使用选择器。切换状态不更改控件的名称。
稳定的设置名称 + switch 控件 + 可选帮助或状态说明。蓝色与滑块右移同时表示开启，灰底与左移表示关闭。
变体与 Tokens
| 项目 | 规范 |
|---|---|
| 开启／关闭 | 共用 .switch，aria-checked 必须与实际状态一致。 |
| 禁用 | 原生 disabled 阻止输入，旁边说明为何不可修改；保留开启或关闭的状态。 |
| 处理中 | 同步请求期间阻止重复切换并提供等待提示，结果确认后更新状态；失败恢复原值并提供重试。 |
| 错误 | 错误文字描述失败原因；不把错误红作为第三种开关状态。 |
复用已有 44 × 26 px 开关与 18 px 滑块；外部命中区域至少 44 px 高。颜色、焦点和位移动效来自共享 action / focus / motion Tokens。
交互与状态示例
接收任务提醒
已关闭切换只更新本页设置，不发送通知。
自动同步已开启 · 不可修改
此设置由工作空间管理员管理。
任务提醒已关闭。
交互与无障碍
Tab 聚焦，Space 或 Enter 通过原生 button click 切换；disabled 不响应。aria-label / aria-labelledby 关联固定名称。不得以“开启／关闭”替换设置名。帮助与错误使用 aria-describedby，文字反馈用 role="status"。演示只更新本页值，不连接服务器。减少动效时关闭滑块位移过渡。
接入约定
| 项目 | 规范 |
|---|---|
| 结构 | button type="button" class="switch" role="switch" aria-checked="false"，提供 aria-label 或 aria-labelledby。 |
| 状态与事件 | 当前共享运行文件委托切换 aria-checked；本页 data-family-switch 同步可见状态并派发 change。不要再绑定第二套切换逻辑。 |
| 表单／持久化 | role="switch" 按钮不会自动提交字段；业务层维护布尔值，需要提交时写入字段；异步等待与回退由业务层管理。 |
查看最小使用示例
<button type="button" class="switch" role="switch"
aria-checked="false" aria-label="接收任务提醒"></button>维护位置：scripts/family-specimens.mjs；示例行为：scripts/family-specimens.js。组合应用见本页末尾引用。