开关

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

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

键盘交互

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

上一篇滑块 Slider

下一篇标签 Tabs

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

开关

Features

结构

API 参考

根部

拇指

可及性

键盘交互