FORM & INPUT
开关Toggle Switch
一颗滑块在轨道里左右滑动，开是绿色关是灰色——比复选框更"物理"的布尔选择。
效果预览
邮件通知
营销推送
自动保存
适合用在哪
设置页、通知偏好、任何开/关语义的选项。
容易踩的坑
- 需要点「保存」才生效的设置也用开关，用户以为已生效直接离开导致设置丢失。
- 开关状态只靠绿色和灰色区分，色弱用户无法判断开关，应加位置或图标提示。
- 用 div 模拟却没加 role="switch" 和 aria-checked，键盘无法切换、读屏不播报状态。
设计提示词 · Prompt
开关（Toggle Switch）：轨道 44-52×26-30px、圆角 999px；滑块比轨道矮 4px、左右留 2px、带 1px 投影。开态轨道变绿色（或品牌色），滑块 translateX 滑到右侧（220ms cubic-bezier(.32,.72,0,1)）。语义必须严格：开关只用于"立即生效"的布尔设置；需要按"保存"才生效的选项改用复选框。整行布局：左侧标签 + 说明文字，右侧开关，行间用分隔线。悬停时轨道轻微加深暗示可点。
Toggle Switch: track 44-52×26-30px, border radius 999px; the thumb is 4px shorter than the track, with 2px left/right inset and a 1px drop shadow. In the on state the track turns green (or brand color) and the thumb slides right via translateX (220ms cubic-bezier(.32,.72,0,1)). Semantics must be strict: switches are only for boolean settings that "take effect immediately"; options that require pressing "Save" should use a checkbox instead. Row layout: label + description on the left, switch on the right, rows separated by dividers. On hover the track darkens slightly to hint it is clickable.
常见搭配
同一页面里经常和「开关」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-toggles"> <div class="d-tg"><span>邮件通知</span><span class="d-tg__sw is-on"></span></div> <div class="d-tg"><span>营销推送</span><span class="d-tg__sw"></span></div> <div class="d-tg"><span>自动保存</span><span class="d-tg__sw is-on is-on--br"></span></div> </div>