Material UI OutlinedInput label is invisible

Question

We are using OutlinedInput from Material UI, but text labels are not rendered. How to fix this?

import { Grid, OutlinedInput } from '@material-ui/core';

<Grid container>
  <Grid item xs={12}>
    <OutlinedInput
      label="invisible label"
      placeholder="HELLO, STACKOVERFLOW!"
      value={value}
      onChange={(e) => handleValueChange(e.target.value)}
      fullWidth
    />
  </Grid>
</Grid>

instead of expected "invisible label" text, an empty space is rendered (top left corner):

Answer 1

Like @Daniel L mentioned, you have to use the InputLabel component within the FormControl component, but in addition to his answer - I had to add a label attribute on my OutlinedInput component so that the outline on the input would not overlap with my label.

Code without the label attribute:

<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
    <InputLabel htmlFor='display-name'>Display Name</InputLabel>
        <OutlinedInput
            id="display-name"
            value={displayName}
            onChange={(e) => handleInputChange(e)}
            aria-describedby="base-name-helper-text"
            inputProps={{
             'aria-label': 'weight',
            }}
      />
   </FormControl>

Code WITH the label attribute:

<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
    <InputLabel htmlFor='display-name'>Display Name</InputLabel>
        <OutlinedInput
            id="display-name"
            value={displayName}
            label='Display Name'
            onChange={(e) => handleInputChange(e)}
            aria-describedby="base-name-helper-text"
            inputProps={{
             'aria-label': 'weight',
            }}
      />
   </FormControl>

Answer 2

The quick answer to this is basically wrapping the component under a FormControl and adding an InputLabel on top of the OutlinedInput component.

Based on your code, it should look like this:

<Grid container>
    <Grid item xs={12}>
        <FormControl>
            <InputLabel htmlFor="outlined-adornment">Some text</InputLabel>
            <OutlinedInput
                id="outlined-adornment"
                placeholder="HELLO, STACKOVERFLOW!"
                value={value}
                onChange={(e) => handleValueChange(e.target.value)}
                fullWidth
            />
        </FormControl>
    </Grid>
</Grid>

Answer 3

I don't think this component is meant to be used on its own. In the MUI docs, it is primarily used as augmentation for other components such as TextField

<TextField id="outlined-basic" label="Outlined" variant="outlined" />

If you inspect the styles in dev tools, it looks like the CSS property visibility: hidden is causing this issue. In fact, if you remove that style, you will see that the label works.

---

However, if you have already built the majority of your app with this component and you need to show that label, just override it with MUI's styling solutions such as makeStyles. In addition, use notched prop to allocate space for it

const useStyles = makeStyles({
  customInputLabel: {
    "& legend": {
      visibility: "visible"
    }
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <Grid container>
        <Grid item xs={12}>
          <OutlinedInput
            classes={{ notchedOutline: classes.customInputLabel }}
            label="visible label"
            placeholder="HELLO, STACKOVERFLOW!"
            fullWidth
            notched
          />
        </Grid>
      </Grid>
    </div>
  );
}

Answer 4

I had the same issue and I wrapped OutlinedInput into the FormControl element and attached InputLabe component as a label and that fixed my issue.