[TextField] add show password feature

[4rthurrr]

Summary

add show password feature when typing a password in sign in form and signup form (it s not apper in chrome)

Examples

No response

Motivation

No response

Search keywords: show password

[mj12albert]

@4rthurrr You can implement this using InputAdornments (doc)

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

render(
  <FormControl>
    <InputLabel htmlFor="password">Password</InputLabel>
    <OutlinedInput
      id="password"
      type={showPassword ? 'text' : 'password'}
      endAdornment={
        <InputAdornment position="end">
          <IconButton
            aria-label={
              showPassword ? 'hide the password' : 'display the password'
            }
            onClick={handleClickShowPassword}
            onMouseDown={ev => ev.preventDefault()}
            onMouseUp={ev => ev.preventDefault()}
            edge="end"
          >
            {showPassword ? <VisibilityOff /> : <Visibility />}
          </IconButton>
        </InputAdornment>
      }
      label="Password"
    />
  </FormControl>
)

it s not apper in chrome

Are you using Edge? You may be referring to Edge's "password reveal button", see #44756