禁用浮动左上标签动画素材-ui密码输入ReactJS

Question

i found an exisitng input with a hide/show password icon, but the probleme is that floating label since iam using material ui and i didn't find a way to remove that animation and make it look like a simple input text with a placeholder

this is my code :

   <Box sx={{ display: "flex", flexWrap: "wrap" }}>
  <div>
    <FormControl sx={{ m: 1, width: "25ch" }} variant="outlined">
         <InputLabel >
        Type here...
      </InputLabel>
      <OutlinedInput
        id="outlined-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>
        }
        label="Password"
      />
    </FormControl>
  </div>
</Box>

it looks like this when i click on the input so i wanna remove that floating effect and make it looks normal

when using shrink={true}

Answer 1

You need to add shrink={true} to InputLabel to remove the label floating effect.

      <InputLabel shrink={true}>
        Type here...
      </InputLabel>