开关

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

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;

Features

完整的键盘导航。

可以是受控或非受控。

安装

从命令行安装组件。

npm install @radix-ui/react-switch

解剖

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

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角色要求。

键盘交互

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

上一篇滑块 Slider

下一篇标签 Tabs

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

开关

Features

安装

解剖

API 参考

根部

拇指

可及性

键盘交互