React MUI TextField API

React MUI 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 are going to discuss the React MUI TextField API. TextField allows us to enter the text in form fields like name, address, etc. The TextField API exposes many features that can be used to make our TextField even more helpful and dynamic. 

Import TextField API:

import TextField from '@mui/material/TextField';
// or
import { TextField } 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.

• children: It is a component similar to the table row.
• classes: This overrides the existing styles or adds new styles to the component.
• sx: The system prop allows defining system overrides as well as additional CSS styles. 
• autoComplete: This takes a string and helps to fill up the fields automatically.
• autoFocus: If set to true, the TextField will be automatically focussed.
• color: This is the color of the ToggleButton.
• defaultValue: It is the default value of the TextField.
• disabled: If set to true, TextField will be disabled.
• error: If set to true, the error state label will be disabled.
• FormHelperTextProps: It is applied to the FormHelperText.
• fullWidth: If set to true, the TextField will take full width.
• helperText: It is the helper text of the TextField.
• id: It is the id of the input TextField used for further processing. 
• InputLabelProps: It is applied to the InputLabel.
• inputProps: The attributes are applied to the input element.
• InputProps: The props are applied to the input element.
• inputRef: It is used for passing the ref to the input element.
• label: It is the label of the input element.
• margin(dense, none, normal): It applies margin to the input element.
• maxRows: It is used to set the maximum number of rows to show when the multiline is set to true.
• minRows: It is used to set the minimum number of rows to show when multiline is set to true.
• multiline: If set to true, the input can take multiple lines of input.
• name: It is the name of the input element.
• onChange: It is the callback function when the text inside TextField is changed.
• placeholder: It is a short hint displayed in the TextField.
• required: If set to true, the input field is required to have some value.
• rows: It is used to set the number of rows to display when multiline is set to true.
• select: If set to true, it is selected.
• SelectProps: It is the props applied to the Select element.
• size(small/medium): It is used to set the size of TextField.
• type: It is used to set the type of input element.
• value: It is the value of the TextField.
• variant(filled/outlined/standard): It is used to set the variant of the TextField.

Syntax: Create a TextField as follows:

<TextField id="name" label="Standard" variant="standard" />

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 @emotion/styled @mui/lab

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have a basic TextField to enter the name.

App.js

import * as React from 'react'
import { TextField } from '@mui/material'

function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: 'fit-content',
                    margin: 'auto',
                }}
            >
                <h1
                    style={{
                        color: 'green',
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI TextField API</strong>
                <br />
                <TextField
                    id="name"
                    label="Name"
                    variant="outlined"
                    placeholder="Enter your name"
                />
            </div>
        </div>
    )
}

export default App

Output:

Example 2: In the following example, we have TextField which is required and has validation.

App.js

import * as React from 'react'
import { TextField } from '@mui/material'
import { useState } from 'react'
function App() {
    const [error, setError] = useState(true)
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: 'fit-content',
                    margin: 'auto',
                }}
            >
                <h1
                    style={{
                        color: 'green',
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI TextField API</strong>
                <br />
                <TextField
                    required
                    error={error}
                    onChange={() => {
                        console.log(document.getElementById('name').value)
                        document.getElementById('name').value.length < 5
                            ? setError(true)
                            : setError(false)
                    }}
                    helperText={error ? 'Name should be greater than 5' : ''}
                    id="name"
                    label="Name"
                    variant="outlined"
                    placeholder="Enter your name"
                />
            </div>
        </div>
    )
}

export default App

Output:

Reference: https://mui.com/material-ui/api/text-field/