How to hide label of mui textfield in react js??
November 20, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To hide label of mui textfield, set InputLabelProps={{shrink: false}}. It will hide label of mui textfield.
Today, I am going to show you, how to hide label of mui textfield in react js.
Installation
Install the following packages to use mui textfield in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledMUI material textfield hide label example.
The below code is an example of hide label using mui textfield.
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import "./App.css"
export default function InputWithIcon() {
const [firstName, setFirstName] = React.useState('')
return (
<Box m={1}>
<TextField
label=" "
InputLabelProps={{shrink: false}}
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
</Box>
);
}In the above code example, I have used the @mui/material TextField component and hide label of MUI Textfield.
Check the output of the above code example.
MUI material textfield hide label example.
If you want code with label name then use this code.
The below code is an example of hide label name using mui textfield.
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import "./App.css"
export default function InputWithIcon() {
const [firstName, setFirstName] = React.useState('')
return (
<Box m={1}>
<TextField
label="FirstName"
InputLabelProps={{shrink: false}}
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
</Box>
);
}In the above code example, I have used the @mui/material TextField component and hide label of MUI Textfield.
Check the output of the above code example.
All the best 👍