这一页带你组合一个真实的开关（Switch）。它自带键盘操作、焦点管理与 ARIA 语义，但一个像素的样式都不带——外观由你写。
组合组件
每个组件都是「一个根 + 若干部件」。开关的根是 Switch，里面放 SwitchThumb：
import { Switch, SwitchThumb } from "@ui-sdk/react/switch";
export function NotifySwitch() {
return (
<Switch aria-label="启用通知" defaultChecked>
<SwitchThumb />
</Switch>
);
}defaultChecked 让它以「开」起步且不受控；想自己管理状态就传 checked 加 onCheckedChange。
看它运行
下面是一个受控的开关，切换时状态实时更新：
启用通知
状态：开
用状态属性写样式
组件把状态暴露在 data-* 属性上，而不是类名。开关打开时根上有 data-checked，于是：
[data-slot="switch"] {
width: 2.75rem;
height: 1.5rem;
border-radius: 999px;
background: var(--color-border-strong);
transition: background 0.15s ease;
}
[data-slot="switch"][data-checked] {
background: var(--color-brand);
}
[data-slot="switch-thumb"] {
width: 1.125rem;
height: 1.125rem;
border-radius: 999px;
background: white;
translate: 0.1875rem 0;
transition: translate 0.15s ease;
}
[data-slot="switch"][data-checked] [data-slot="switch-thumb"] {
translate: 1.375rem 0;
}没有内联样式、没有生成的 id、没有组件强加的颜色。换一套令牌，整个开关就换一副样子。