跳到内容跳到内容
🚀 影响 Joy UI 2025 年路线图！参与最新的开发者调查

单选框组API

React RadioGroup 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

import RadioGroup from '@mui/joy/RadioGroup';
// or
import { RadioGroup } from '@mui/joy';

阅读这篇关于最小化 bundle size 的指南，了解它们之间的区别。

Props

名称类型默认值描述
className字符串-

应用于根元素的类名。

color'danger'
| 'primary'
| 'success'
| 'warning'
| 字符串		'neutral'

组件的颜色。它支持对该组件有意义的主题颜色。

要了解如何添加自己的颜色，请查看主题组件—扩展颜色。

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串，也可以是组件。

defaultValueany-

默认值。当组件不受控制时使用。

disableIcon布尔值false

单选框的 disabledIcon prop。如果指定，该值将传递给此元素下的每个单选框。

name字符串-

用于引用控件值的名称。如果您不提供此 prop，它将回退到随机生成的名称。

onChange函数-

当单选按钮被选中时触发的回调。

签名：function(event: React.ChangeEvent) => void
  • event 回调的事件源。您可以通过访问 event.target.value (字符串) 来获取新值。
orientation'horizontal'
| 'vertical'		'vertical'

组件方向。

overlay布尔值false

单选框的 overlay prop。如果指定，该值将传递给此元素下的每个单选框。

size'sm'
| 'md'
| 'lg'
| 字符串		'md'

组件的大小。

要了解如何向组件添加自定义大小，请查看主题组件—扩展大小。

slotProps{ root?: 函数
| object }		{}

用于每个 slot 内部的 props。

slots{ root?: elementType }{}

用于每个 slot 内部的组件。

有关更多详细信息，请参阅下面的Slots API。

sxArray<函数
| object
| bool>
| 函数
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参阅 sx 页面。

valueany-

所选单选按钮的值。DOM API 将其转换为字符串。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| 字符串		'plain'

要使用的全局 variant。

要了解如何添加自己的 variant，请查看主题组件—扩展 variant。

ref 被转发到根元素。

主题默认 props

您可以使用 JoyRadioGroup 通过主题更改此组件的默认 props。

Slots

要了解如何自定义 slot，请查看覆盖组件结构指南。

Slot 名称类名默认组件描述
root.MuiRadioGroup-root'div'渲染根的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的 slot。

类名规则名称描述
.MuiRadioGroup-colorDangercolorDanger如果 color="danger"，则应用于根元素的类名。
.MuiRadioGroup-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的类名。
.MuiRadioGroup-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的类名。
.MuiRadioGroup-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的类名。
.MuiRadioGroup-colorWarningcolorWarning如果 color="warning"，则应用于根元素的类名。
.MuiRadioGroup-horizontalhorizontal如果 orientation="horizontal"，则应用于根元素的类名。
.MuiRadioGroup-sizeLgsizeLg如果 size="lg"，则应用于根元素的类名。
.MuiRadioGroup-sizeMdsizeMd如果 size="md"，则应用于根元素的类名。
.MuiRadioGroup-sizeSmsizeSm如果 size="sm"，则应用于根元素的类名。
.MuiRadioGroup-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的类名。
.MuiRadioGroup-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的类名。
.MuiRadioGroup-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的类名。
.MuiRadioGroup-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的类名。
.MuiRadioGroup-verticalvertical如果 orientation="vertical"，则应用于根元素的类名。

您可以使用以下自定义选项之一来覆盖组件的样式

  • 使用全局类名。
  • 使用规则名称作为自定义主题中组件的 styleOverrides 属性的一部分。

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。