How to hide/unhide password Material uI-CodePudding

I have a Login in my App and I would like to have the option to hide and unhide the password.

This is my TextField:

<TextField
  className={classes.textf}
  variant="standard"
  placeholder="password"
  onChange={(password) => setPassword(password)}
/>

CodePudding user response：

The TextField component has a type prop, you can set it to either "text" or "password" to show/hide the value.

const [showPassword, setShowPassword] = useState(false);

// ...

<TextField
  type={showPassword ? "text" : "password"}
  placeholder="password"
  />
<button onClick={() => setShowPassword(s => !s)}>Toggle visibility</button>

CodePudding user response：

This might resolve your issue,

import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import FilledInput from '@mui/material/FilledInput';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import FormControl from '@mui/material/FormControl';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';

export default function InputAdornments() {
  const [values, setValues] = React.useState({
    password: '',
    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>
      <FormControl sx={{ m: 1, width: '25ch' }} variant="filled">
        <InputLabel
          htmlFor="filled-adornment- 
   password">
          Password
        </InputLabel>
        <FilledInput
          id="filled-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}
                edge="end">
                {values.showPassword ? <VisibilityOff /> : <Visibility />}
              </IconButton>
            </InputAdornment>
          }
        />
      </FormControl>
    </div>
  );
}