RadioAPI

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

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

Radio

导入

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

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

Props

名称	类型	默认	描述
checked	bool	-	如果为 `true`，则组件会被选中。
checkedIcon	node	-	组件被选中时显示的图标。
className	string	-	应用于根元素的类名。
color	'danger' \| 'primary' \| 'success' \| 'warning' \| string	'neutral'	组件的颜色。它支持对此组件有意义的主题颜色。要了解如何添加您自己的颜色，请查看主题组件——扩展颜色。
component	elementType	-	用于根节点的组件。可以使用字符串来使用 HTML 元素或组件。
defaultChecked	bool	-	默认的选中状态。当组件不受控制时使用。
disabled	bool	-	如果为 `true`，则组件会被禁用。
disableIcon	bool	false	如果为 `true`，则会移除选中的图标，并将选定的变体应用于 `action` 元素。
label	node	-	单选按钮末尾的标签元素。
name	string	-	input 的 `name` 属性。
onChange	func	-	当状态更改时触发的回调。签名:`function(event: React.ChangeEvent<htmlinputelement>) => void` `event` 回调的事件源。您可以通过访问 `event.target.value` (字符串) 来获取新值。您可以通过访问 `event.target.checked` (布尔值) 来获取新的选中状态。
overlay	bool	false	如果为 `true`，则根元素的位置设置为 initial，这允许 action 区域填充最近的定位父元素。此 prop 对于将 Radio 与 ListItem 组件组合很有用。
readOnly	bool	-	如果为 `true`，则组件为只读。
required	bool	-	如果为 `true`，则 `input` 元素是必需的。
size	'sm' \| 'md' \| 'lg' \| string	'md'	组件的大小。要了解如何向组件添加自定义尺寸，请查看主题组件——扩展尺寸。
slotProps	{ action?: func \| object, icon?: func \| object, input?: func \| object, label?: func \| object, radio?: func \| object, root?: func \| object }	{}	用于内部每个插槽的 props。
slots	{ action?: elementType, icon?: elementType, input?: elementType, label?: elementType, radio?: elementType, root?: elementType }	{}	用于内部每个插槽的组件。有关更多详细信息，请参阅下面的插槽 API。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅 `sx` 页面。
uncheckedIcon	node	-	当组件未选中时显示的图标。
value	any	-	组件的值。DOM API 将其转换为字符串。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'outlined'	要使用的全局变体。要了解如何添加您自己的变体，请查看主题组件——扩展变体。

ref 被转发到根元素。

主题默认 props

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

插槽

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

插槽名称	类名	默认组件	描述
root	.MuiRadio-root	`'span'`	渲染根的组件。
radio	.MuiRadio-radio	`'span'`	渲染单选按钮的组件。
icon	.MuiRadio-icon	`'span'`	渲染图标的组件。
action	.MuiRadio-action	`'span'`	渲染 action 的组件。
input	.MuiRadio-input	`'input'`	渲染 input 的组件。
label	.MuiRadio-label	`'label'`	渲染 label 的组件。

CSS 类

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

类名	规则名称	描述
.Mui-checked		如果 `checked`，则应用于根插槽和 action 插槽的状态类。
.Mui-disabled		如果 `disabled`，则应用于根插槽和 action 插槽的状态类。
.Mui-focusVisible		如果开关具有可见焦点，则应用于根元素的类名
.MuiRadio-colorContext	colorContext	当颜色反转被触发时，应用于根元素的类名。
.MuiRadio-colorDanger	colorDanger	如果 `color="danger"`，则应用于根元素的类名。
.MuiRadio-colorNeutral	colorNeutral	如果 `color="neutral"`，则应用于根元素的类名。
.MuiRadio-colorPrimary	colorPrimary	如果 `color="primary"`，则应用于根元素的类名。
.MuiRadio-colorSuccess	colorSuccess	如果 `color="success"`，则应用于根元素的类名。
.MuiRadio-colorWarning	colorWarning	如果 `color="warning"`，则应用于根元素的类名。
.MuiRadio-sizeLg	sizeLg	如果 `size="lg"`，则应用于根元素的类名。
.MuiRadio-sizeMd	sizeMd	如果 `size="md"`，则应用于根元素的类名。
.MuiRadio-sizeSm	sizeSm	如果 `size="sm"`，则应用于根元素的类名。
.MuiRadio-variantOutlined	variantOutlined	如果 `variant="outlined"`，则应用于根元素的类名。
.MuiRadio-variantSoft	variantSoft	如果 `variant="soft"`，则应用于根元素的类名。
.MuiRadio-variantSolid	variantSolid	如果 `variant="solid"`，则应用于根元素的类名。

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

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

源代码

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