FormControlLabel

Overview

FormControlLabel is used to describe the purpose of the form control created. You can use this component if you want to display an extra label. Only after FormControl has been first created, then FormControlLabel can be generated accordingly. FormControlLabel is included in FormControl always.

Please refer to this for more information: https://mui.com/material-ui/api/form-control-label/.

Import

CODE

import { FormControl, FormControlLabel } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
Default Style	Control: None	The component Default Style describes Control.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component size of Margin and Padding with many selectable Size Units.
Size	Size Unit: Px	The component size includes Width and Height with many selectable Size Units.
Layout	Position: None	The component layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Label	Text: Label Font-family: None Font-weight: None Text-align: Left Label-placement: None Size Unit: Px	The component text includes Text, Font-family, Font-size, Font-weight, Font-color, Text-align, Label-placement.
Value		The component Value includes Value.
General	Disabled: False Checked: False Visibility: none Opacity: 100%	The component General includes Disabled, Checked, Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<FormControlLabel
              disabled={true}
              checked={true}
              value="Hello120Px"
              sx={{':focus': {'margin': '1px 3px 4px 2px','padding': '2px 1px 3px 4px',},}}
              control={<Switch />}/>

Related Component:

Dialog