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;