Skip to main content
Skip table of contents

FormLabel

Overview

FormLabel is often used as part of a subcomponent in a form. FormLabel can only be constructed after FormControl has been defined, just like the wayFormControlLabel operates.

Only after FormControl has been defined on the Source code can FormLabel be generated and included in FormControl as the below code sample.

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

Import

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

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

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 includes Width and Height with many selectable Size Units.

Text

Text: New Form Label

Font-family: None

Size Unit: Px

Font-weight: None

Text-align: Left

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

General

Opacity: 100%

The component General includes Opacity, and Background.

Advanced Style

The component Advanced Style includes Classname and Inline Style addition.

Code Sample

CODE
 <FormControl>
      <FormLabel
            sx={{
              'margin': '10px 30px 40px 20px',
              'padding': '10px 30px 40px 20px',
              ':active': {
                'width': '150px',
                'height': '100px',
                'fontFamily': 'Noto-Sans',
                'fontSize': '15px',
                'fontWeight': 'bold',
              },
            }}
          >Form1
      </FormLabel>
        </FormControl>

Related Component:

JavaScript errors detected

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

If this problem persists, please contact our support.