React MUI FormControl API

MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI FormControl API. The FormControl helps to provide context such as filled, focused, error, or required for form inputs. 

Import FormControl API:

import FormControl from '@mui/material/FormControl';
// or
import { FormControl } from '@mui/material';

FormControl Props:

• children: It represents the content of the component.
• classes: it helps to override styles applied to the component.
• component:  The component used for the root node. Either a string to use an HTML element or a component.
• color: It sets the color of the component.
• disabled:  It is a boolean value. It determines whether the label, input, and helper text should be displayed in a disabled state or not. It is false by default. 
• error: It is a boolean value. It determines whether the label should be displayed in an error state or not. It is false by default.
• fullWidth: It is a boolean value. It determines whether the component should take up the full width of its container or not. It is false by default.
• hiddenLabel:  It is a boolean value. It determines whether the label should be hidden or not. It is false by default.
• size:  It sets the size of the component. It can take either value normal’ or ‘small’.
• focused: It is a boolean value. It determines whether the component should use the focused classes key or not. It is false by default.
• required:  It is a boolean value. It determines whether the label should use the required class key or not. It is false by default.
• margin: sets margin to the Component.
• sx: A superset of CSS that packages all of the style functions.
• variant: It sets the variant of the component. ‘filled’, ‘outlined’, or ‘standard’, one can use either of these values. 

CSS Rules:

• root(.MuiInput-root): The style applied to the root element.
• marginNormal (.MuiFormControl-marginNormal): The style applied to the root element if margin=”normal”.
• marginDense (.MuiFormControl-marginDense): The style applied to the root element if margin=”dense”.
• fullWidth (.MuiFormControl-fullWidth): The style applied to the root element if fullWidth={true}.

Syntax:

<FormControl ></FormControl >

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material 
npm install @emotion/react 
npm install @emotion/styled

Project Structure: It will look like the following.

Example 1: In this example, we added two input fields, in two FormControl Components. To the first, we are passing fullWidth and color props and two the second we are passing size and margin props.

App.js

Javascript

import { Input, FormControl, InputLabel } from '@mui/material';

export default function App() {
    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>
                GeeksforGeeks
            </h1>
            <h4>React MUI FormControl API</h4>

            <FormControl fullWidth color='success'>
                <InputLabel>Username: </InputLabel>
                <Input />
            </FormControl>
            <FormControl size="small" margin='dense'>
                <InputLabel>Age: </InputLabel>
                <Input />
            </FormControl>
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Example 2: In this example, we are creating two states using react hook useState naming name and isBool. We are adding a function named onChangeHandler that checks whether the input text contains only a letter or not and changes the states. To the FormControl component, we are passing isBool to the error prop. When we are typing anything in the input field the on-change function onChangeHandler gets triggered.

App.js

Javascript

import { FormControl, InputLabel, Input } from '@mui/material';
import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');
    const [isBool, setIsBool] = useState(false)

    const onChangeHandler = (e) => {
        setName(e.target.value)
        if (!name.match(/^[A-Za-z\s]*$/)) {
            setIsBool(true);
            alert('error: allows letters only')
        } else {
            setIsBool(false);

        }
    }

    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>
                GeeksforGeeks
            </h1>
            <h4>React MUI FormControl API</h4>
            <FormControl error={isBool}>
                <InputLabel>Name: </InputLabel>
                <Input id="my-input" onChange={onChangeHandler} />
            </FormControl>

        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Reference: https://mui.com/material-ui/api/form-control/