无线电分组

一组可选中按钮，称为单选按钮，一次只能选中一个按钮。

import React from 'react';
import * as RadioGroup from '@radix-ui/react-radio-group';
import './styles.css';

const RadioGroupDemo = () => (
  <form>
    <RadioGroup.Root className="RadioGroupRoot" defaultValue="default" aria-label="View density">
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <RadioGroup.Item className="RadioGroupItem" value="default" id="r1">
          <RadioGroup.Indicator className="RadioGroupIndicator" />
        </RadioGroup.Item>
        <label className="Label" htmlFor="r1">
          Default
        </label>
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <RadioGroup.Item className="RadioGroupItem" value="comfortable" id="r2">
          <RadioGroup.Indicator className="RadioGroupIndicator" />
        </RadioGroup.Item>
        <label className="Label" htmlFor="r2">
          Comfortable
        </label>
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <RadioGroup.Item className="RadioGroupItem" value="compact" id="r3">
          <RadioGroup.Indicator className="RadioGroupIndicator" />
        </RadioGroup.Item>
        <label className="Label" htmlFor="r3">
          Compact
        </label>
      </div>
    </RadioGroup.Root>
  </form>
);

export default RadioGroupDemo;

特点

完整的键盘导航。

支持水平/垂直方向。

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

安装

从命令行安装组件。

npm install @radix-ui/react-radio-group

解剖

导入所有部分并拼凑在一起。

import * as RadioGroup from '@radix-ui/react-radio-group';

export default () => (
  <RadioGroup.Root>
    <RadioGroup.Item>
      <RadioGroup.Indicator />
    </RadioGroup.Item>
  </RadioGroup.Root>
);

API 参考

根

包含无线电组的所有部分。

道具	类型	默认值
`asChild`	`布尔值`	`false`
`defaultValue`	`字符串`	无默认值
`值`	`字符串`	无默认值
`onValueChange`	`函数`	无默认值
`禁用`	`布尔值`	无默认值
`名称`	`字符串`	无默认值
`必需`	`布尔值`	无默认值
`方向`	`枚举`	`未定义`
`方向`	`枚举`	无默认值
`循环`	`布尔值`	`true`

数据属性	值
`[data-disabled]`	禁用时出现

项目

组中可以选中的一项。当在 form 中使用时，也会渲染一个 input，以确保事件正确传播。

道具	类型	默认值
`asChild`	`布尔值`	`false`
`值`	`字符串`	无默认值
`禁用`	`布尔值`	无默认值
`必需`	`布尔值`	无默认值

数据属性	值
`[data-state]`	`"已选中" \|"未选中"`
`[data-disabled]`	禁用时出现

指标

当无线电项目处于选中状态时渲染。您可以直接设置此元素的样式，也可以将其用作包装器来放入图标，或者两者都使用。

道具	类型	默认值
`asChild`	`布尔值`	`false`
`forceMount`	`布尔值`	无默认值

数据属性	值
`[data-state]`	`"已选中" \|"未选中"`
`[data-disabled]`	禁用时出现

无障碍性

符合单选按钮组 WAI-ARIA 设计模式并使用循环 Tab 键来管理单选按钮项之间的焦点移动。

键盘交互

键	描述
`Tab`	将焦点移动到已选中的单选按钮项或组中的第一个单选按钮项。
`空格键`	当焦点在未选中的单选按钮项上时，选中该项。
`向下箭头`	将焦点移动到组中的下一个单选按钮项并选中它。
`向右箭头`	将焦点移动到组中的下一个单选按钮项并选中它。
`向上箭头`	将焦点移动到组中的上一个单选按钮项。
`向左箭头`	将焦点移动到组中的上一个单选按钮项。

上一个进度条

下一个滚动区域

在 GitHub 上编辑此页面。

概述

指南

组件

实用程序

无线电分组

特点