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

CODE

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

CODE

  <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