How would I display an image inside a TextField as if it was part of the text, like an InputAdornment just not to either side, but at the beginning of the TextField.

and not next as an icon next to the text input area which is what InputAdornment does (e.g., not like a search icon next to a query field)?

Only way I can think of is just placing the image above the TextField but I found this made it not obvious that the image is part of the input.

I've looked through the documentation but there doesn't seem to be an obvious way of acplishing this.

Thank you so much in advance!

How would I display an image inside a TextField as if it was part of the text, like an InputAdornment just not to either side, but at the beginning of the TextField.

and not next as an icon next to the text input area which is what InputAdornment does (e.g., not like a search icon next to a query field)?

Only way I can think of is just placing the image above the TextField but I found this made it not obvious that the image is part of the input.

I've looked through the documentation but there doesn't seem to be an obvious way of acplishing this.

Thank you so much in advance!

• javascript
• css
• reactjs
• material-ui

• 1 you can't. An <input> element that is type text only accepts text. The solution is to craft a custom element like a <div> or <span> into which you can place an <img> element first followed by an editor element. You can then make the editor element contentEditable – Randy Casburn Commented Dec 23, 2021 at 20:45

2 Answers 2

The ments on your question are partially correct. You can't reasonably edit the actual <input> without losing functionality, but the Textfield ponent is not just an <input> and is posed of multiple elements that can contain/display an image.

Since no MUI version was specified, I'll assume that you're using latest. (This can also be acplished with the MUI 4 TextField using the old makeStyles function.)

You can change the placement of the TextField startAdornment with a few changes to the underlying CSS. Essentially, you can change the default flex-direction from row to column and then finesse the gutters to your liking:

    <TextField
      id="input-with-icon-textfield"
      label="TextField"
      variant="outlined"
      sx={{
        ".MuiOutlinedInput-root": {
          paddingTop: "1rem",
          flexDirection: "column"
        },
        img: {
          paddingRight: "1rem"
        }
      }}
      InputProps={{
        startAdornment: <img src="https://via.placeholder./180x150/200" />
      }}
      placeholder="Enter image caption..."
    />

Which produces this:

Working example: https://codesandbox.io/s/inputwithicon-material-demo-forked-tyx7y?file=/demo.js:139-580

You can select the native input element produced by the library and place a background image on it. You would then define a background-position-(x|y) to adjust the image placement. To alter the text position accordingly, you would move the cursor around inside the field by specifying the padding or text-indent property.

Below background positions 5px 6px for x and y placement is set at the end of the background property respectively.

input[type='text'][class^='MuiInput'] {
  background: url(https://dummyimage./20/00ff00/000) no-repeat 5px 6px;
  padding-left: 10px; /* or */ text-indent: 10px;
}