跳到正文
GitHub

表单

Switch

一个立刻生效的设置。

什么时候用它

放在带保存按钮的表单里,开关就是在骗人——那种情况用 Checkbox。

示例

default

说明

一个立即生效的设置。

Checkbox 不同,而且这个区别不是外观上的:开关在拨动那一刻生效,勾选框在提交时生效。一个放在带“保存”按钮的表单里的开关,是在对“改动什么时候发生”撒谎。

打开时轨道填满墨色,滑块是带细线的纸白——而不是一个浮在投影上的白色滑块,这套系统没有投影。关闭态是一条填了线色的轨道,所以这个控件在白色页面上仍然读得出是个控件。

属性

同时接受 ComponentProps<typeof SwitchPrimitive.Root> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

键盘操作

Switch keyboard interactions
按键作用
SpaceEnter切换开关,改动立即生效。