开关

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

import React from 'react';
import * as Switch from '@radix-ui/react-switch';
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 * as Switch from '@radix-ui/react-switch';

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

API 参考

根

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

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

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

滑块

用于直观指示开关是否打开或关闭的滑块。

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

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

无障碍性

符合switch 角色要求。

键盘交互

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

上一个滑块

下一个选项卡

在 GitHub 上编辑此页面。

概述

指南

组件

实用程序

开关

功能

安装

结构

API 参考

根

滑块

无障碍性

键盘交互