Material UI OutlinedInput label is invisible

user_1429387 0
Viewed 4904

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):

demo screenshot

react-tsx react-material reactjs input
4 Answers

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>

enter image description here

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>

enter image description here

user_131759260

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.

enter image description here

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>
  );
}

Edit musing-morning-sqn5q

user_86808050

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.

user_129649960

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>
user_191395230
Related