React MUI FormHelperText 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 FormHelperText API. The FormHelperText helps to add an additional text related to the input field in the form for the users.

Import FormHelperText API:

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

FormHelperText 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 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 helper text should be displayed in an error state or not. It is false by default.
filled: It is a boolean value. It determines whether the helper text should use the filled classes key or not. It is false by default.
focused: It is a boolean value. It determines whether the helper text should use the focused classes key or not. It is false by default.
required: It is a boolean value. It determines whether the helper text should use the required class key or not. It is false by default.
margin: sets margin to the FormHelperText with respect to FormControl.
sx: A superset of CSS that packages all of the style functions.
variant: It sets the variant of the component. ‘filled’, ‘outlined’, ‘standard’, or ‘string’ one can use either of these values.

CSS Rules:

root(.MuiInput-root): The style applied to the root element.
error(.Mui-error): The style class is applied to the root element if the error is set to true.
disabled(.Mui-disabled): The style applied to the root element if disabled is set to true.
sizeSmall(.MuiInput-sizeSmall): The style applied to the input element if the size is set to small.
contained( .MuiFormHelperText-contained): The style applied to the root element if variant=”filled” or variant=”outlined”.
focused(.Mui-focused): The style applied to the root element if the component is focused.
filled( .MuiFormHelperText-filled): The style applied to the root element if filled is set to true.
required(.Mui-required): The style applied to the root element if disabled is set to true.

Syntax:

<FormHelperText></FormHelperText>

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 and also added FormHelperText along with it. To the first FormHelperText component, we are passing id = “username-helper” and to the second one, we added id = “country-helper” and also added the disabled prop.

App.js

Javascript

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

export default function App() { 

    return ( 

        <div style={{ margin: 30 }}> 

            <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 

            <h4> React MUI  FormHelperText API </h4> 

            <FormControl> 

                <label>Username :</label> 

                <Input id="user" /> 

                <FormHelperText id="username-helper"> 

                    must be more than 5 characters 

                </FormHelperText> 

                <label>Country :</label> 

                <Input id="country" disabled /> 

                <FormHelperText id="country-helper" disabled > 

                    disabled field 

                </FormHelperText> 

            </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 three states using react hook useState naming val, selectBool, and helper text. We are adding a function named onHandleChange that checks the length of the current input string and changes the states. To the FormHelperText component, we are passing selectBool to the error prop. When we are typing anything in the input field the on-change function onHandleChange gets triggered.

App.js

Javascript

import { useState } from 'react'; 
import { FormHelperText, FormControl, Input } 

    from '@mui/material'; 

export default function App() { 

    const [val, setVal] = useState("") 

    const [selectBool, setSelectBool] = useState(false); 

    const [helperText, setHelperText] = 

        useState(" username must be more than 9 characters") 

    const onHandleChange = (e) => { 

        setVal(e.target.value); 

        if (val.length > 9) { 

            setSelectBool(false) 

            setHelperText("correct") 

        } 

        else { 

            setSelectBool(true) 

            setHelperText( 

                "error: must be more than 9 characters") 

        } 

    }; 

    return ( 

        <div style={{ margin: 30 }}> 

            <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 

            <h4> React MUI FormHelperText API </h4> 

            <FormControl> 

                <label>Username :</label> 

                <Input id="user" onChange={onHandleChange} 

                    value={val} /> 

                <FormHelperText id="username-helper"

                    error={selectBool}>{helperText} 

                </FormHelperText> 

            </FormControl> 

        </div> 

    ); 
}