React Material OutlinedInput is notched if label not provided

2 years ago

#57811

user8884641

I have an issue with OutlinedInput wherein the textbox appears notched if I don't give the label. I want an outlined input textbox without any labels. This is my code:

<FormControl sx={{ m: 1, width: '50ch' }} variant="outlined">
  <OutlinedInput
    id="old-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>

According to the official examples, the box should look like this:

But it looks like this:

Can anybody tell me what am I doing wrong here?

javascript

reactjs

material-ui

textbox

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs