In Material-UI (MUI) TextField, we can have both a label and a placeholder, but when the text field is empty, we can only see the label. We have to start editing the TextField in order to see the placeholder. Is there a way to say that both the label and placeholder should show initially when the field is empty? We'd also like to style the placeholder slightly differently by making it slightly gray compared to the black label text color. Is there a way to do this?
4 Answers
you can force input label to shrink. https://mui.com/components/text-fields/#shrink
you can add input Text color with sx props on TextField. placeholder takes color from the input text color too. you can test this by removing inputProps props in below code.
if you want different colors for input text and placeholder use inputProps
ref: Styling the placeholder in a TextField
<TextField
sx={{
"& .MuiOutlinedInput-root": {
color: "red"
}
}}
variant="outlined"
label="Your custom label"
placeholder="Placeholder Text"
InputLabelProps={{ shrink: true }}
inputProps={{
sx: {
"&::placeholder": {
color: "green"
}
}
}}
/>
iam still looking the best resolution..
my current approach
<TextField focused label="Standard" placeholder='lorem ipsum' />
or
<TextField InputLabelProps={{ shrink: true }} label="Standard" placeholder='lorem ipsum' />
You can use placeholder and label both. but, when the user click on the textfield, the placeholder will be displayed
<TextField id="standard-basic" placeholder="enter" label="Standard" variant="standard" />
https://codesandbox.io/s/basictextfields-material-demo-forked-i7tcn?file=/demo.js
This works for me:
<TextField InputLabelProps={{ shrink: true }} label="Name" placeholder='lorem ipsum' />
Related