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):
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>
);
}
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 @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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With