How can I set the placeholder of Autocomplete in a new line?

I’m using Autocomplete of material-ui and I have the list of the selected values and the placeholder in the same area. I would like to set the placeholder in a new line. I’m able to change the style of placeholder using makeStyles but I didn’t find a way to going in a new line.

const useStyles = makeStyles ({
  placeholder: {
    "& input::placeholder": {
    display: "block",

renderInput={(params) => (
    /* eslint-disable react/jsx-props-no-spreading */
    classes={{root: classes.placeholder}}
    label="Selected Options"
    placeholder="Availables Options"


You can override the renderTags method, add a wrapper component around all selected tags, and set the wrapper width to 100% to push the placeholder element down like this:

  options={ => option.title)}
  renderTags={(value: string[], getTagProps) => (
    <div style={{ width: "100%" }}>
      { string, index: number) => (
          {...getTagProps({ index })}
  renderInput={(params) => <TextField {...params} />}

Live Demo

Edit 67090943/how-can-i-set-the-placeholder-of-autocomplete-in-a-new-line