How to align label and input text inside MUI textarea?

Question

I need a textarea field containing label inside the textarea field. The input text will start from the end of the label. If the label is so long, it will go to the second line. According to device width, the field and label will be responsive.

My expectation

Name of the Hospital/Clinic/Consultation Center, etc. : Dhaka Medical College and Hospital

What I've tried

const [value, setValue] = useState('');

<TextField
  label="Name of the Hospital/Clinic/Consultation Center, etc."
  multiline
  minRows={2}
  fullWidth
  className="myname"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

**Style:**

.myname {
  label {
    transform: translate(14px, 16px) scale(1) !important;
    color: #000 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  fieldset {
    legend {
      display: none !important;
      visibility: hidden !important;
    }
  }
}

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community
– Community Bot, Commented Jul 3 at 5:58
I want to input long text inside a textarea. The textarea will contain label (not editable) inside the textarea field. I'll start writing after the label. The label will be responsive in mobile device if label text is long. — MIH10
– MIH10, Commented Jul 3 at 6:14
I think you're looking for startAdornment. It can be a custom component (possibly a label), not just an icon. You can style to your needs from there, as long as you're not looking for shrink. — Steve G
– Steve G, Commented Jul 6 at 17:55
@SteveG, I used startAdornment, but the expected solution is not found. I need the lines except first just below the label (from where its started). Also the label is not responsive in small device when I used long text (mentioned above)... thanks — MIH10
– MIH10, Commented Jul 8 at 13:45

MIH10 · Accepted Answer · 2025-07-09 09:47:26Z

I've tried using contentEditable. Here is the solution

const LongLabelTextarea = (props) => {
  const { label, onChange = () => {}, className } = props;

  const containerRef = useRef(),
    contentRef = useRef();

  useEffect(() => {
    const container = containerRef.current,
      content = contentRef.current;

    function placeCaretAtEndOfLabel() {
      const range = document.createRange();
      const sel = window.getSelection();
      range.selectNodeContents(content);
      range.collapse(false);
      sel.removeAllRanges();
      sel.addRange(range);
    }

    // Place caret at end on focus
    container.addEventListener("click", placeCaretAtEndOfLabel);
    content.addEventListener("focus", placeCaretAtEndOfLabel);

    // Extract user input
    content.addEventListener("input", (e) => {
      //console.log("User input:", content.innerText.trim());

      e.target.value = content.innerText;
      onChange(e);
    });
  }, []);

  return (
    <div className={`${Style.container} ${className}`} ref={containerRef}>
      <label className={Style.label}>{label} </label>
      <div className={Style.content} contentEditable={true} ref={contentRef}></div>
    </div>
  );
};

export default LongLabelTextarea;

Style:

.container {
  border: 1px solid #ccc !important;
  padding: 8px !important;
  word-break: break-word !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  border-radius: 3px !important;
}

.container:has(.content:focus) {
  outline: none !important;
  border-color: #007bff !important;
}

.label {
  display: inline !important;
  color: #888 !important;
  pointer-events: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

.content {
  display: inline !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  outline: none !important;
}

Details: https://codesandbox.io/p/devbox/longlabeltextarea-dgk7w3

Collectives™ on Stack Overflow

How to align label and input text inside MUI textarea?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related