switch 开关

用途

开 / 关型偏好设置,右对齐排在标签行尾。用例参考:「抓取后自动打开复核窗口」。预览可点击切换。

设计规范 · macOS 26 / 27

• 对应 NSSwitch / SwiftUI Toggle:选中轨道 #0a84ff 即 Apple systemBlue(暗值);未选中轨道明 #E9E9E9 / 暗 #484E51 为系统 fill 灰。
• 轨道与滑块同为胶囊、比例镜像——WWDC25 所述开关的同心(concentric)几何。
• 按压行为是 Liquid Glass 的招牌:控件在交互瞬间「升起为液态玻璃」——按住时滑块 scale-150 放大、底色转近透明(white/5)并亮起描边高光(ring),松手 400ms 弹性回位,正是该行为的 Web 拟态。
• HIG(macOS):行式设置布局宜用 switch,零散多选项仍用 checkbox。

状态与交互

• 点击切换;滑块位移 left-0.5 ↔ left-5.5;样式由 data-[checked=true] 驱动,aria-pressed 同步(无障碍状态)。
• 演示状态机提供 value 读取与 setValue(value, { silent })——编程赋值不触发 change 事件。

参考实现

Web 参考:SwitchToggle.vue(defineModel 双绑);原生对应 NSSwitch。切换即改状态,持久化交由「保存」统一提交或即时生效,视窗口语义而定;不要用开关触发一次性动作。