单选按钮组

一组可勾选的按钮（称为单选按钮），其中一次只能勾选一个按钮。

import * as React from "react";
import { RadioGroup } from "radix-ui";
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 { RadioGroup } from "radix-ui";

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

API 参考

根

包含单选按钮组的所有部分。

属性	类型	默认
`asChild`	`布尔值`	`false`
`defaultValue`	`字符串`	无默认值
`value`	`字符串`	无默认值
`onValueChange`	`函数`	无默认值
`disabled`	`布尔值`	无默认值
`name`	`字符串`	无默认值
`required`	`布尔值`	无默认值
`orientation`	`枚举`	`未定义`
`dir`	`枚举`	无默认值
`loop`	`布尔值`	`true`

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

项目

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

属性	类型	默认
`asChild`	`布尔值`	`false`
`value`	`字符串`	无默认值
`disabled`	`布尔值`	无默认值
`required`	`布尔值`	无默认值

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

指示器

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

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

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

可访问性

遵循 Radio Group WAI-ARIA 设计模式并使用 roving tabindex 来管理单选按钮项之间的焦点移动。

键盘交互

按键	描述
`Tab`	将焦点移动到已选中的单选按钮项或组中的第一个单选按钮项。
`空格`	当焦点位于未选中的单选按钮项上时，选中它。
`ArrowDown`	移动焦点并选中组中的下一个单选按钮项。
`ArrowRight`	移动焦点并选中组中的下一个单选按钮项。
`ArrowUp`	将焦点移动到组中的上一个单选按钮项。
`ArrowLeft`	将焦点移动到组中的上一个单选按钮项。

上一个进度条

下一个滚动区域

在 GitHub 上编辑此页。

概述

指南

组件

实用工具

单选按钮组

特性