How to show both label and placeholder in material-ui TextField

Question

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?

Answer 1

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"
      }
    }
  }}
/>