#MultilineTextInput

Source | Original component

A multi-line text input; input capabilities match TextInput.

#Basic usage

import { useState } from "react";
import { MultilineTextInput } from "ooui-react";

function App() {
  const [text, setText] = useState("");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 320 }}>
      <MultilineTextInput value={text} onChange={setText} placeholder="Controlled multiline input" />
      <div>Current length: {text.length}</div>
      <MultilineTextInput defaultValue="Uncontrolled; the component remembers what you type" />
    </div>
  );
}

export default App;

#Rows and auto height

rows is the minimum number of rows (written to the <textarea>'s rows attribute). With autosize on, the height follows the content: it grows until maxRows and turns into internal scrolling beyond that; maxRows defaults to max(2 × rows, 10).

Without autosize, the height stays at rows lines and overflowing content scrolls.

Beyond input, the auto-height re-measure has a size-observer fallback: font loading and container or width changes also trigger a re-measure (the original only re-measures on input, so the height can lag behind).

import { MultilineTextInput } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 320 }}>
      <MultilineTextInput autosize rows={2} placeholder="autosize: grows with the content" />
      <MultilineTextInput rows={3} defaultValue={"Line one\nLine two\nLine three\nLine four\nLine five"} />
    </div>
  );
}

export default App;

#Scrollbar offset

When a vertical scrollbar appears, the indicator and the label placed after the input shift by the scrollbar width to stay clear of it (always enabled for multiline input; nothing to configure). When the input's direction diverges from the page's (e.g. a dir='rtl' input on an LTR page), the offset is withdrawn entirely, avoiding the label-stretching distortion the original shows in that case.

#Line breaks and Enter

Enter always inserts a line break.

#Capabilities shared with TextInput

The following behave exactly as in TextInput and are not repeated here:

• Label: label / labelPosition / invisibleLabel;
• Icon and indicator: icon, indicator; when indicator is not given explicitly and required is true, it falls back to the required indicator;
• Soft validation: validate (RegExp / function / 'non-empty' / 'integer'), flags without rewriting the value;
• State: maxLength, readOnly (focusable and copyable), disabled.

import { MultilineTextInput } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 320 }}>
      <MultilineTextInput label="Bio" labelPosition="before" placeholder="Up to 20 characters" maxLength={20} />
      <MultilineTextInput validate="non-empty" placeholder="Clear it and blur to see it flagged" />
    </div>
  );
}

export default App;

#Where props land

The component root is a non-focusable <div> and the input element is a <textarea>. The landing rules are the same as TextInput:

• ...rest from props lands on the root div; attributes that must go on the native <textarea> (such as role, aria-*) go through the inputProps channel, whose onChange/onBlur/onFocus are chained after the component's own logic.
• inputRef points to the inner <textarea> (the component ref points to the root div); use inputRef to focus the input.
• tabIndex, title, dir, accessKey and name are taken over by the component and land directly on the <textarea> (matching the original's landing spots), not via rest.

#API

#See also

• The single-line form and full soft-validation details: TextInput
• How values flow between the component and your state: Controlled and uncontrolled
• The pass-through and ref rules shared by all components: Common props