Skip to main content
Skip table of contents

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

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.