Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material UI OutlinedInput label is invisible

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

like image 961
naXa Avatar asked Jun 08 '20 11:06

naXa


4 Answers

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

like image 121
95faf8e76605e973 Avatar answered Oct 28 '22 00:10

95faf8e76605e973


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.

like image 38
Gagik Navasatariyan Avatar answered Oct 27 '22 23:10

Gagik Navasatariyan


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

like image 29
Drew Daniels Avatar answered Oct 27 '22 22:10

Drew Daniels


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>
like image 43
Daniel L Avatar answered Oct 27 '22 22:10

Daniel L