FormControlLabel API

想要学习更多组件属性和 CSS API，可以查阅 React FormControlLabel 组件的 API 文档。

导入

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

Drop-in replacement of the Radio, Switch and Checkbox component. Use this component if you want to display an extra label.

在主题中，名称“MuiFormControlLabel”可用于提供默认属性（props），或者样式覆盖

原生（Native）组件的属性也是可用的。

名称	类型	默认值	描述
control^*	element		A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
checked	bool	false	If `true`, the component appears selected.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
componentsProps	{ typography?: object }	{}	The props used for each slot inside.
disabled	bool	false	If `true`, the control is disabled.
disableTypography	bool	false	If `true`, the label is rendered as it is passed without an additional typography node.
inputRef	ref		Pass a ref to the `input` element.
label	node		The text to be used in an enclosing label element.
labelPlacement	'bottom' \| 'end' \| 'start' \| 'top'	'end'	The position of the label.
onChange	func		Callback fired when the state is changed. Signature: `function(event: object) => void` event: The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean).
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
value	any		The value of the component.

ref 则会被传递到根元素中。

规则名称	全局类名	描述
root	.MuiFormControlLabel-root	Styles applied to the root element.
labelPlacementStart	.MuiFormControlLabel-labelPlacementStart	Styles applied to the root element if `labelPlacement="start"`.
labelPlacementTop	.MuiFormControlLabel-labelPlacementTop	Styles applied to the root element if `labelPlacement="top"`.
labelPlacementBottom	.MuiFormControlLabel-labelPlacementBottom	Styles applied to the root element if `labelPlacement="bottom"`.
disabled	.Mui-disabled	Pseudo-class applied to the root element if `disabled={true}`.
label	.MuiFormControlLabel-label	Styles applied to the label's Typography component.
error	.Mui-error	State class applied to the root element if `error={true}`.

您可以使用组件自定义选项对组件进行个性化：