Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档案例博客
Components

单选按钮组

¥Radio Group

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

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;

Features

    Full keyboard navigation.

    Supports horizontal/vertical orientation.

    Can be controlled or uncontrolled.

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

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

结构

¥Anatomy

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

¥Import all parts and piece them together.

import { RadioGroup } from "radix-ui";



export default () => (

	<RadioGroup.Root>

		<RadioGroup.Item>

			<RadioGroup.Indicator />

		</RadioGroup.Item>

	</RadioGroup.Root>

);

API 参考

¥API Reference

根

¥Root

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

¥Contains all the parts of a radio group.

PropTypeDefault
asChild
boolean
false
defaultValue
string
No default value
value
string
No default value
onValueChange
function
No default value
disabled
boolean
No default value
name
string
No default value
required
boolean
No default value
orientation
enum
undefined
dir
enum
No default value
loop
boolean
true
Data attributeValues
[data-disabled]

Present when disabled

项目

¥Item

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

¥An item in the group that can be checked. An input will also render when used within a form to ensure events propagate correctly.

PropTypeDefault
asChild
boolean
false
value
string
No default value
disabled
boolean
No default value
required
boolean
No default value
Data attributeValues
[data-state]"checked" | "unchecked"
[data-disabled]

Present when disabled

指示符

¥Indicator

当单选按钮处于选中状态时渲染。你可以直接设置此元素的样式，也可以将其用作封装器来放置图标，或者两者兼而有之。

¥Renders when the radio item is in a checked state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

PropTypeDefault
asChild
boolean
false
forceMount
boolean
No default value
Data attributeValues
[data-state]"checked" | "unchecked"
[data-disabled]

Present when disabled

可访问性

¥Accessibility

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

¥Adheres to the Radio Group WAI-ARIA design pattern and uses roving tabindex to manage focus movement among radio items.

键盘交互

¥Keyboard Interactions

KeyDescription
Tab
Moves focus to either the checked radio item or the first radio item in the group.
Space
When focus is on an unchecked radio item, checks it.
ArrowDown
Moves focus and checks the next radio item in the group.
ArrowRight
Moves focus and checks the next radio item in the group.
ArrowUp
Moves focus to the previous radio item in the group.
ArrowLeft
Moves focus to the previous radio item in the group.
Previous进度
Next滚动区域