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.