Skip to main content
Skip table of contents

Checkbox

Overview

An input control known as a Checkbox enables users to choose one or more selections from a wide range of choices. Not only can the users select one or more items from a set using checkboxes, but a checkbox can also be utilized to switch on or off an option.

DartIDE-CUC-Checkbox

Please refer to this for more information: https://mui.com/material-ui/react-checkbox/.

Import

CODE
import { Checkbox } 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 Margin and Padding with many selectable Size Units.

Size

Size Unit: Px

The component Size of 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.

Icon

Default: Enabled

Checked: Disabled

Indetermined: Disabled

The component Icon includes Default, Checked, and Indetermined.

Title

Font-family: Noto sans

Font-weight: Normal

Text-align: Left

Size Unit: Px

The component Text includes Text, Font-family, Font-size, Font-weight, Font-color, Text-align.

General

Disabled: false

Checked: false

Indetermined: false

Opacity: 100%

The component General includes Disabled, Checked, Indertermined, Opacity, and Background.

Advanced Style

The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE
<FormControlLabel
  label="Parent"
  control={
    <Checkbox
      checked={checked[0] && checked[1]}
      indeterminate={checked[0] !== checked[1]}
      onChange={handleChange1} />}/>

JavaScript errors detected

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

If this problem persists, please contact our support.