React MUI FormControlUnstyled 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 FormControlUnstyled API. The FormControlUnstyled helps to provide context such as filled, focused, error, or required for form inputs.

Import FormControlUnstyled  API:

import FormControlUnstyled from '@mui/base/FormControlUnstyled';
// or
import { FormControlUnstyled } from '@mui/base';

FormControlUnstyled  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.
• 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.
• required:  It is a boolean value. It determines whether the label should use the required class key or not. It is false by default.
• slotProps:  props used for each slot inside the FormControl.
• slots: It is either a string to use an HTML element or a component, used for each slot inside the FormControl.

Syntax:

<FormControlUnstyled ></FormControlUnstyled>

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 FormControlUnstyled Components.

App.js

Javascript

import { InputLabel } from '@mui/material';
import { FormControlUnstyled, InputUnstyled } from '@mui/base';

export default function App() {
    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>React MUI FormControlUnstyled API</h4>
            <FormControlUnstyled defaultValue={"user"} >
                <InputLabel>Name:</InputLabel>
                <InputUnstyled id="name" />
            </FormControlUnstyled>
            <FormControlUnstyled>
                <InputLabel>Age: </InputLabel>
                <InputUnstyled id="age" type="number" />
            </FormControlUnstyled>
        </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 a state using react hook useState naming selectBool. We are adding a function named onClickHandler that sets the selectBool as true. To the FormControl component, we are passing selectBool to the disabled prop. When we click on the submit button that triggers the onClickHandler and the input field gets disabled.

App.js

Javascript

import { Button, InputLabel } from '@mui/material';
import { FormControlUnstyled, InputUnstyled } from '@mui/base';
import { useState } from 'react';

export default function App() {

    const [selectBool, setSelectBool] = useState(false)

    const onClickHandler = () => {
        setSelectBool(true)
    }

    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>React MUI FormControlUnstyled API</h4>
            <FormControlUnstyled disabled={selectBool}>
                <InputLabel>Name: </InputLabel>
                <InputUnstyled id="my-input" />
            </FormControlUnstyled>
            <Button variant="contained"
                disabled={selectBool} size='small'
                onClick={onClickHandler}
                style={{ marginTop: 10 }}>submit
            </Button>
        </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/base/api/form-control-unstyled/