Switch Component · UI Design System

🎨 3 个状态

Off（关闭）

Notifications

On（开启）

Notifications

Disabled

Unavailable

⚙️ Settings 列表（典型用法）

推送通知邮件订阅暗黑模式

📐 Spec Details

Track 尺寸

44 × 24px

圆角

12px（pill）

Off 背景

--grey-300

On 背景

--yellow-500

Thumb 尺寸

20 × 20px

Thumb 阴影

0 2px 4px rgba(0,0,0,0.2)

滑动距离

20px

Transition

0.2s ease

Focus 光晕

--yellow-500 3px 25% opacity

🎯 使用规则

二元设置：开 / 关；on vs off
立即生效：不需要点击"保存"按钮（vs Checkbox 通常是表单提交）
不要做选择：互斥用 Radio，多选用 Checkbox
典型场景：通知开关 / 暗黑模式 / 自动保存 / 默认值设置
Switch ≠ Checkbox：Switch 立即生效，Checkbox 在表单提交时一起
ARIA：原生 <input type="checkbox"> 自带 a11y（switch role）
iOS-style 警告：移动端确认操作（如"删除账户"）用 Modal 而不是 Switch