React MUI Input API

Last Updated : 26 Sep, 2022

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 Input API. The Input element allows us to place the input elements with the required id and other classes on the webpage. It supports Text fields, buttons, etc. The API provides a lot of functionality and we will learn to implement them.

Import Input API

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

Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.

autoComplete(string): It helps to fill up the forms faster with some predefined or previously used values.
autoFocus(bool): If set to true, the input element is focussed during the first mount. False has been set as the default value.
classes(object): It overrides or applies styles to the element.
color(primary/secondary): It is used to set the color of the component. The default value is primary.
components(Input): It is used to set the components used for each slot inside the InputBase.
componentProps(props): It is used to apply the props for each slot inside the Input.
defaultValue(any): The default value of the input element.
disabled(bool): If set to true, the input element is disabled. False has been set as the default value.
disableUnderline(bool): If set to true, the input will not have an underline. False has been set as the default value.
endAdornment(node): It is the end InputAdornment for this component.
error(bool): If set to true, the input will indicate an error. False has been set as the default value.
fullWidth(bool): If set to true, the input will take the full width. False has been set as the default value.
id(string): It is used to set the id of the element.
inputComponent(elementType): It is used to set the type of input element. The default value is input.
inputProps(object): It is used to set the props for the input component.
inputRef(ref): It is used to pass a reference to the input element.
margin(dense/none): If set to dense, the component will adjust the vertical padding. The default value is none.
maxRows(number): It is used to set the maximum number of rows if the multiline is set to true.
minRows(number): It is used to set the minimum number of rows if the multiline is set to true.
multiline(bool): If set to true, the TextArea auto resizes. False has been set as the default value.
name(string): The name of the input element.
onChange(func): This is the callback function used when the value inside the input is changed.
placeholder(string): It is used to set the hint displayed in the input element.
readOnly(bool): If set to true, the user will be able to read the input value only. False has been set as the default value.
required(bool): If set to true, the input element needs to be filled up by the user.
rows(number): Number of rows to display when multiline is set to true.
sx (Array<func / object/bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles.
type(string): It is used to set the type of input element. The default value is text.
value(any): The value of the input element.

CSS Rules:

root(.MuiInput-root): It is the style applied to the root element.
formControl(.MuiInput-formControl): It is the style applied to the root element if the component is a descendant of FormControl.
focused(.Mui-focused): It is the style applied to the root element if the component is focused.
disabled(.Mui-disabled): It is the style applied to the root element if disabled is set to true.
colorSecondary(.MuiInput-colorSecondary): It is the style applied to the root element if the color is set to secondary.
underline(.MuiInput-underline): It is the style applied to the root element unless disableUnderline is set to true.
error(.Mui-error): It is the style class applied to the root element if the error is set to true.
sizeSmall(.MuiInput-sizeSmall): It is the style applied to the input element if the size is set to small.
multiline(.MuiInput-multiline): It is the style applied to the root element if multiline is set to true.
fullWidth(.MuiInput-fullWidth): It is the style applied to the root element if fullWidth is set to true.
input(.MuiInput-input): It is the style applied to the input element.
inputSizeSmall(.MuiInput-inputSizeSmall): It is the style applied to the input element if size is set to small.
inputMultiline(.MuiInput-inputMultiline): It is the style applied to the input element if multiline is set to true.
inputTypeSearch(.MuiInput-inputTypeSearch): It is the style applied to the input element if type is set to search.

Syntax: Create an Input element as follows:

<Input
    value={values.amount}
    onChange={handleChange("amount")}
/>

Installing and Creating React app and adding the MUI dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/lab @mui/icons-material

Project Structure: The project should look like the below:

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have some Input Elements with adornments.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Input from "@mui/material/Input";
import FilledInput from "@mui/material/FilledInput";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import InputAdornment from "@mui/material/InputAdornment";
import FormHelperText from "@mui/material/FormHelperText";
import FormControl from "@mui/material/FormControl";
import TextField from "@mui/material/TextField";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";

function App() {
    const [values, setValues] = React.useState({
        amount: "",
        password: "",
        weight: "",
        weightRange: "",
        showPassword: false,
    });

    const handleChange = (prop) => (event) => {
        setValues({ ...values, [prop]: event.target.value });
    };

    const handleClickShowPassword = () => {
        setValues({
            ...values,
            showPassword: !values.showPassword,
        });
    };

    const handleMouseDownPassword = (event) => {
        event.preventDefault();
    };

    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Input API</strong>
            </div>
            <br />
            <Box sx={{ display: "flex", flexWrap: "wrap" }}>
                <div>
                    <FormControl fullWidth sx={{ m: 1, width: "25ch" }} 
                        variant="filled">
                        <InputLabel htmlFor="filled-adornment-amount">
                            Amount
                        </InputLabel>
                        <Input
                            id="filled-adornment-amount"
                            value={values.amount}
                            onChange={handleChange("amount")}
                            startAdornment={
                                <InputAdornment position="start">
                                    $
                                </InputAdornment>
                            }
                        />
                    </FormControl>
                </div>
                <div>
                    <TextField
                        label="Weight"
                        id="standard-start-adornment"
                        sx={{ m: 1, width: "25ch" }}
                        InputProps={{
                            startAdornment: (
                                <InputAdornment position="start">
                                    kg
                                </InputAdornment>
                            ),
                        }}
                        variant="standard"
                    />

                    <FormControl sx={{ m: 1, width: "25ch" }} 
                        variant="standard">
                        <InputLabel 
                        htmlFor="standard-adornment-password">
                            Password
                        </InputLabel>
                        <Input
                            id="standard-adornment-password"
                            type={values.showPassword ? "text" : "password"}
                            value={values.password}
                            onChange={handleChange("password")}
                            endAdornment={
                                <InputAdornment position="end">
                                    <IconButton
                                        aria-label="toggle password visibility"
                                        onClick={handleClickShowPassword}
                                        onMouseDown={handleMouseDownPassword}
                                    >
                                        {values.showPassword 
                                        ? <VisibilityOff /> 
                                        : <Visibility />}
                                    </IconButton>
                                </InputAdornment>
                            }
                        />
                    </FormControl>
                </div>
            </Box>
        </div>
    );
}
export default App;

Output:

Example 2: In the following example, we have full-width input.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Input from "@mui/material/Input";
import FilledInput from "@mui/material/FilledInput";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import InputAdornment from "@mui/material/InputAdornment";
import FormHelperText from "@mui/material/FormHelperText";
import FormControl from "@mui/material/FormControl";
import TextField from "@mui/material/TextField";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";

function App() {
    const [values, setValues] = React.useState({
        amount: "",
        password: "",
        weight: "",
        weightRange: "",
        showPassword: false,
    });

    const handleChange = (prop) => (event) => {
        setValues({ ...values, [prop]: event.target.value });
    };

    const handleClickShowPassword = () => {
        setValues({
            ...values,
            showPassword: !values.showPassword,
        });
    };

    const handleMouseDownPassword = (event) => {
        event.preventDefault();
    };

    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Input API</strong>
            </div>
            <br />
            <Box sx={{ display: "flex", flexWrap: "wrap" }}>
                <div>
                    <TextField
                        label="Weight"
                        id="standard-start-adornment"
                        sx={{ m: 1, width: "25ch" }}
                        InputProps={{
                            startAdornment: (
                                <InputAdornment position="start">
                                    kg
                                </InputAdornment>
                            ),
                        }}
                        variant="standard"
                    />
                    <FormControl variant="standard" 
                        sx={{ m: 1, mt: 0, width: "25ch" }}>
                        <FormHelperText id="standard-weight-helper-text">
                            Height
                        </FormHelperText>
                        <Input
                            label="Height"
                            id="standard-adornment-weight"
                            value={values.weight}
                            endAdornment={
                              <InputAdornment position="end">
                                  cm
                              </InputAdornment>
                            }
                            aria-describedby="standard-weight-helper-text"
                            onChange={handleChange("weight")}
                        />
                    </FormControl>
                    <FormControl sx={{ m: 1, width: "25ch" }} 
                    variant="standard">
                        <InputLabel htmlFor="standard-adornment-password">
                            Password
                        </InputLabel>
                        <Input
                            id="standard-adornment-password"
                            type={values.showPassword 
                                ? "text" 
                                : "password"}
                            value={values.password}
                            onChange={handleChange("password")}
                            endAdornment={
                                <InputAdornment position="end">
                                    <IconButton
                                        aria-label="toggle password visibility"
                                        onClick={handleClickShowPassword}
                                        onMouseDown={handleMouseDownPassword}
                                    >
                                        {values.showPassword 
                                            ? <VisibilityOff /> 
                                            : <Visibility />}
                                    </IconButton>
                                </InputAdornment>
                            }
                        />
                    </FormControl>
                    <FormControl fullWidth sx={{ m: 1 }} 
                        variant="standard">
                        <InputLabel htmlFor="standard-adornment-amount">
                            Amount
                        </InputLabel>
                        <Input
                            id="standard-adornment-amount"
                            value={values.amount}
                            onChange={handleChange("amount")}
                            startAdornment={
                                <InputAdornment position="start">
                                    $
                                </InputAdornment>
                            }
                        />
                    </FormControl>
                </div>
            </Box>
        </div>
    );
}
export default App;