开关

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

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

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

export default SwitchDemo;

特性

完整的键盘导航。

可以是受控的或非受控的。

安装

从命令行安装组件。

npm install @radix-ui/react-switch

解剖结构

导入所有部件并将它们组装在一起。

import { Switch } from "radix-ui";

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

API 参考

根元素

包含开关的所有部件。当在表单中使用时，也会渲染一个 input 元素，以确保事件正确传播。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`defaultChecked`	`布尔值`	无默认值
`checked`	`布尔值`	无默认值
`onCheckedChange`	`函数`	无默认值
`disabled`	`布尔值`	无默认值
`required`	`布尔值`	无默认值
`name`	`字符串`	无默认值
`value`	`字符串`	`on`

数据属性	值
`[data-state]`	`"checked" \|"unchecked"`
`[data-disabled]`	禁用时存在

滑块

用于直观地指示开关是开启还是关闭的滑块。

属性	类型	默认值
`asChild`	`布尔值`	`false`

数据属性	值
`[data-state]`	`"checked" \|"unchecked"`
`[data-disabled]`	禁用时存在

可访问性

符合 switch 角色要求。

键盘交互

键	描述
`空格键`	切换组件的状态。
`Enter 键`	切换组件的状态。

上一个滑块

下一个标签页

在 GitHub 上编辑此页。

概述

指南

组件

实用工具

开关

特性

安装

解剖结构

API 参考

根元素

滑块

可访问性

键盘交互