import FormControlLabel from '@mui/material/FormControlLabel';
// or
import { FormControlLabel } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.
Drop-in replacement of the Radio
, Switch
and Checkbox
component. Use this component if you want to display an extra label.
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
control* | element | - | A control element. For instance, it can be a Radio , a Switch or a Checkbox . |
checked | bool | - | If true , the component appears selected. |
classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
componentsProps | { typography?: object } | {} | The props used for each slot inside. |
disabled | bool | - | If true , the control is disabled. |
disableTypography | bool | - | 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 | - | A text or an element 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: React.SyntheticEvent) => void - event The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean). |
required | bool | - | If true , the label will indicate that the input is required. |
slotProps | { typography?: func | object } | {} | The props used for each slot inside. |
slots | { typography?: elementType } | {} | The components used for each slot inside. |
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. |
The ref
is forwarded to the root element.
You can use MuiFormControlLabel
to change the default props of this component with the theme.
Slot name | Class name | Default component | Description |
---|---|---|---|
typography | - | Typography |
The component that renders the label. This is unused if disableTypography is true. |
These class names are useful for styling with CSS. They are applied to the component’s slots when specific states are triggered.
Class name | Rule name | Description |
---|---|---|
.Mui-disabled | - | State class applied to the root element if disabled={true} . |
.Mui-error | - | State class applied to the root element if error={true} . |
.Mui-required | - | State class applied to the root element if required={true} . |
.MuiFormControlLabel-asterisk | asterisk | Styles applied to the asterisk element. |
.MuiFormControlLabel-label | label | Styles applied to the label’s Typography component. |
.MuiFormControlLabel-labelPlacementBottom | labelPlacementBottom | Styles applied to the root element if labelPlacement="bottom" . |
.MuiFormControlLabel-labelPlacementStart | labelPlacementStart | Styles applied to the root element if labelPlacement="start" . |
.MuiFormControlLabel-labelPlacementTop | labelPlacementTop | Styles applied to the root element if labelPlacement="top" . |
.MuiFormControlLabel-root | root | Styles applied to the root element. |
You can override the style of the component using one of these customization options:
styleOverrides
property in a custom theme.If you did not find the information in this page, consider having a look at the implementation of the component for more detail.