组件 · 表单 · 原生 HTML 与 React
开关 Switch
立即生效的开 / 关。需要「保存」才生效的选项用复选。
演示
<label class="xxd-choice"><input type="checkbox" role="switch" class="xxd-switch" checked>完成音效</label>export function SwitchDemo() {
const [on, setOn] = useState(true);
return <Switch label="完成音效" checked={on} onCheckedChange={setOn} />;
}状态
同一个元素的各种状态并排。悬停、聚焦、按下用的是组件 CSS 里真实的规则（构建时复制成强制状态），不是手画的。
默认
悬停
键盘聚焦
选中
禁用
属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| data-size | sm | （缺省）| lg |
| role="switch" | 必须 |
| 类名 | xxd-switch |
键盘与读屏
- <input type="checkbox" role="switch">，读屏读「开 / 关」
- 标签写开着时是什么（「完成音效」），不要写「开启完成音效」
规则
- 直角模式下开关也是方的（--r-pill）
- 开 = --switch-on：墨色时是灰，有主色时是主色