开关

允许用户在选中和未选中之间切换的控件。

import * as React from "react";
import { Switch } from "radix-ui";
import "./styles.css";

const SwitchDemo = () => (
	<form>
		<div style={{ display: "flex", alignItems: "center" }}>
			<label
				id="airplane-mode-label"
				htmlFor="airplane-mode"
				className="Label"
				style={{ paddingRight: 15 }}
			>
				Airplane mode
			</label>
			<Switch.Root
				id="airplane-mode"
				aria-labelledby="airplane-mode-label"
				className="SwitchRoot"
			>
				<Switch.Thumb className="SwitchThumb" />
			</Switch.Root>
		</div>
	</form>
);

export default SwitchDemo;

Features

完整的键盘导航。
可以是受控或非受控。

结构

导入所有部分并将它们组合在一起。

import { Switch } from "radix-ui";

export default () => (
	<Switch.Root>
		<Switch.Thumb />
	</Switch.Root>
);

API 参考

根部

包含开关的所有部分。使用在form内时也会渲染一个input，以确保事件正确传播。

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultChecked`	`boolean`	No default value
`checked`	`boolean`	No default value
`onCheckedChange`	`function`	No default value
`disabled`	`boolean`	No default value
`required`	`boolean`	No default value
`name`	`string`	No default value
`value`	`string`	`on`

Data attribute	Values
`[data-state]`	`"checked" \| "unchecked"`
`[data-disabled]`	禁用时出现

拇指

用于直观指示开关是开还是关的部分。

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"checked" \| "unchecked"`
`[data-disabled]`	禁用时出现

示例

解耦隐藏输入

默认情况下，Switch.Root 会渲染一个视觉隐藏的 input，用于表单提交。要重新组合、移动或排除该输入，可以改用其较低层级的部分来构建 switch。

重要： 这些部分不稳定，并带有 unstable_ 前缀，因此其 API 可能会在未来版本中发生变化。

Switch.unstable_Provider 提供 switch 状态，并接受与表单相关的属性（name、value、checked、defaultChecked、required、disabled、onCheckedChange）。
Switch.unstable_Trigger 是包裹 Switch.Thumb 的交互式按钮。
Switch.unstable_BubbleInput 是 Switch.Root 默认渲染的视觉隐藏输入。如果不需要表单提交，可以省略它。

import { Switch } from "radix-ui";

export default () => (
	<Switch.unstable_Provider name="airplane-mode">
		<Switch.unstable_Trigger>
			<Switch.Thumb />
		</Switch.unstable_Trigger>
		{/* The hidden input can be omitted if you don't need form submission */}
		<Switch.unstable_BubbleInput />
	</Switch.unstable_Provider>
);

可访问性

符合switch角色要求。

键盘交互

Key	Description
`Space`	切换组件的状态。
`Enter`	切换组件的状态。

上一篇滑块 Slider

下一篇标签 Tabs

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

开关

Features