表单控件标签API

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

演示

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

导入

import FormControlLabel from '@mui/material/FormControlLabel';
// or
import { FormControlLabel } from '@mui/material';

通过阅读关于最小化 bundle 大小的指南，了解它们之间的区别。

Radio、Switch 和 Checkbox 组件的直接替换。如果你想显示额外的标签，请使用此组件。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
control*	元素	-	一个控制元素。例如，它可以是 `Radio`、`Switch` 或 `Checkbox`。
checked	布尔值	-	如果为 `true`，组件将显示为选中状态。
classes	对象	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS classes API。
componentsProps	{ typography?: 对象 }	{}	用于每个内部插槽的 props。已弃用－请改用 `slotProps` prop。此 prop 将在 v7 中删除。有关更多详细信息，请参阅从已弃用的 API 迁移。
disabled	布尔值	-	如果为 `true`，则禁用该控件。
disableTypography	布尔值	-	如果为 `true`，则标签将按原样渲染，而无需额外的排版节点。
inputRef	ref	-	将 ref 传递给 `input` 元素。
label	节点	-	要在封闭标签元素中使用的文本或元素。
labelPlacement	'bottom' \| 'end' \| 'start' \| 'top'	'end'	标签的位置。
onChange	函数	-	状态更改时触发的回调。签名:`function(event: React.SyntheticEvent) => void` `event` 回调的事件源。你可以通过访问 `event.target.checked` (布尔值) 来获取新的选中状态。
required	布尔值	-	如果为 `true`，标签将指示 `input` 是必需的。
slotProps	{ typography?: 函数 \| 对象 }	{}	用于每个内部插槽的 props。
slots	{ typography?: elementType }	{}	用于每个内部插槽的组件。
sx	Array<函数 \| 对象 \| 布尔值> \| 函数 \| 对象	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅 `sx` 页面。
value	any	-	组件的值。

ref 被转发到根元素。

主题默认 props

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

插槽

插槽名称	类名	默认组件	描述
typography		`排版`	渲染标签的组件。如果 `disableTypography` 为 true，则不使用此项。

CSS 类

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

类名	规则名称	描述
.Mui-disabled		如果 `disabled={true}`，则应用于根元素的状态类。
.Mui-error		如果 `error={true}`，则应用于根元素的状态类。
.Mui-required		如果 `required={true}`，则应用于根元素的状态类。
.MuiFormControlLabel-asterisk	星号	应用于星号元素的样式。
.MuiFormControlLabel-label	label	应用于标签的 Typography 组件的样式。
.MuiFormControlLabel-labelPlacementBottom	labelPlacementBottom	如果 `labelPlacement="bottom"`，则应用于根元素的样式。
.MuiFormControlLabel-labelPlacementStart	labelPlacementStart	如果 `labelPlacement="start"`，则应用于根元素的样式。
.MuiFormControlLabel-labelPlacementTop	labelPlacementTop	如果 `labelPlacement="top"`，则应用于根元素的样式。
.MuiFormControlLabel-root	root	应用于根元素的样式。

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

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

源代码

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