React MUI InputAdornment API

React 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 InputAdornment API. The InputAdornment helps to add a prefix, a suffix, or an action to an input field.

InputAdornment Props:

• children: It represents the content of the component.
• classes: it helps to override styles applied to the component.
• position: The position of the adornment.
• component:  The component used for the root node. Either a string to use an HTML element or a component.
• disablePointerEvents: It is a boolean value. It determines whether to disable pointer events on the root or not.
• disableTypography: It is a boolean value. It determines not to wrap in a Typography component if the child is a string.
• 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( .MuiInputAdornment-root): The style applied to the root element.
• filled(  .MuiInputAdornment-filled ): The style applied to the root element if variant=”filled”.
• outlined (.MuiInputAdornment-outlined): The style applied to the root element if variant=”outlined”.
• standard (.MuiInputAdornment-standard): The style applied to the root element if variant=”standard”.
• positionStart (.MuiInputAdornment-positionStart): The style applied to the root element if position=”start”.
• positionEnd (.MuiInputAdornment-positionEnd):  The style applied to the root element if position=”end”.
• disablePointerEvents( .MuiInputAdornment-disablePointerEvents): The style applied to the root element if  disablePointerEvents={true}.
• hiddenLabel (.MuiInputAdornment-hiddenLabel): The style applied on the component when the adornment is used inside.
• sizeSmall (.MuiInputAdornment-sizeSmall): The style applied on the component when the adornment is used inside.

Syntax:

<InputAdornment></InputAdornment>

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
npm install @mui-material/icons

Project Structure: It will look like the following.

Example 1: In this example, we are adding a TextField Component, with a id, to the InputProps we are passing the InputAdornment with position and disableTypography prop.

• App.js

Javascript

import { InputAdornment, TextField } from '@mui/material';

export default function App() {

    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>React MUI InputAdornment API</h4>
            <p>Mention Your Internet Speed</p>
            <TextField
                id="internet-speed"
                InputProps={{
                    endAdornment:
                    <InputAdornment disableTypography position="end">
                        Mbps</InputAdornment>,
                }}
            />
        </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: We are creating isBool states using react hook useState. We are adding a function named onClickHandler that changes the state of isBool. We are importing the two icons named EditIcon and EditOffIcon. Through the InputProps we have wrapped the InputAdorment within the IconButton Component which calls the onClickHandler whenever clicked on it.

• App.js

Javascript

import { InputAdornment, TextField, IconButton } from '@mui/material';
import { useState } from 'react';
import EditIcon from '@mui/icons-material/Edit';
import EditOffIcon from '@mui/icons-material/EditOff';

export default function App() {
    const [isBool, setIsBool] = useState(false);
    const onClickHandler = () => {
        setIsBool(!isBool)
    }

    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>React MUI InputAdornment API</h4>
            <p>Edit Name:</p>
            <TextField
                id="name"
                disabled={!isBool}
                defaultValue="user"
                InputProps={{
                    endAdornment: <InputAdornment position="end">
                       <IconButton onClick={onClickHandler}>
                            {isBool ? <EditOffIcon /> : <EditIcon />}
                        </IconButton>
                    </InputAdornment>,
                }}

            />

        </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/input-adornment/