React input field with icon example
June 20, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. how to input field with icon in react js with code example.
Install MUI:
Emotion library is required to create react components that have styles attached to them.
npm install @mui/material @emotion/react @emotion/styledLet’s add two new props – startIcon and endIcon; each will accept any element as a value. Then, in InputProp, we can dynamically add and remove InputAdorment based on the icon value:
Let’s look at the following example to understand how it basically works:
App.js
import InputAdornment from "@mui/material/InputAdornment";
import TextField from "@mui/material/TextField";
import AttachMoneyIcon from "@mui/icons-material/AttachMoney";
import QuestionMark from "@mui/icons-material/QuestionMark";
import AccountCircle from "@mui/icons-material/AccountCircle";
import Visibility from "@mui/icons-material/Visibility";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import Box from "@mui/material/Box";
export default function App() {
return (
<Box
className="App"
sx={{
display: "grid",
gridTemplateColumns: "270px 270px",
gridGap: 10
}}
>
<IconTextField
label="Salary"
iconStart={<AttachMoneyIcon sx={{ color: "green", fontSize: 20 }} />}
iconEnd={<QuestionMark sx={{ color: "#0089ff", fontSize: 20 }} />}
/>
<IconTextField label="Password" iconEnd={<Visibility />} />
<IconTextField label="First Name" iconStart={<AccountCircle />} />
<IconTextField
label="Last Name"
iconEnd={<ErrorOutlineIcon sx={{ color: "red" }} />}
/>
</Box>
);
}
const IconTextField = ({ iconStart, iconEnd, InputProps, ...props }) => {
return (
<TextField
{...props}
InputProps={{
...InputProps,
startAdornment: iconStart ? (
<InputAdornment position="start">{iconStart}</InputAdornment>
) : null,
endAdornment: iconEnd ? (
<InputAdornment position="end">{iconEnd}</InputAdornment>
) : null
}}
/>
);
};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:
Check the output of the above code example.
All the best 👍