Checkbox with Label
Overview
Checkbox with Label acts as an anchor for these checkbox elements. In this Basic Component, after you drop, FormControl - FormGroup - FormLabel - FormControlLabel will together be generated automatically.
Import
import { Checkbox with Label } 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. |
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 | Full-width: false Size Unit: Px | The component Size of Width and Height with many selectable Size Units, and Full-width. |
Layout | Position: None Size Unit: Px | The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units. |
General | Visibility: Visible Disabled: false Required: false Error: false Opacity: 100% | The component General includes Visibility, Disabled, Required, Error, Opacity, and Background. |
Advanced Style | The component Advanced Style includes Classname and Inline Style addition. |
Code Sample
<FormControl
sx={{':active': {'width': '150px','height': '200px',
'position': 'static','top': '10px','right': '15px','bottom': '20px','left': '20px',
'visibility': 'visible',}, }}>
<FormLabel
sx={{'fontFamily': 'Noto-Sans',
'fontWeight': 'bold',
'fontSize': '15px',}}>Label1
</FormLabel>
<FormGroup
sx={{ 'width': '10px',':hover': { 'width': '150px', 'height': '200px' },}}
row={true}>
<FormControlLabel
disabled={true}
checked={true}
value="Hello120Px"
sx={{':focus': {'margin': '1px 3px 4px 2px','padding': '2px 1px 3px 4px',}, }}
control={<Switch />}/>
</FormGroup>
</FormControl>
You need to select Checkbox with Label first, then there are four components: FormControl, FormLabel, FormGroup, FormControlLabel that will be generated automatically.
Basic Component API