<textarea>

<textarea />

• Reference
  • <textarea>
• Usage
  • Displaying a text area
  • Providing a label for a text area
  • Providing an initial value for a text area
  • Reading the text area value when submitting a form
  • Controlling a text area with a state variable
• Troubleshooting
  • My text area doesn’t update when I type into it
  • My text area caret jumps to the beginning on every keystroke
  • I’m getting an error: “A component is changing an uncontrolled input to be controlled”

Reference

<textarea>

To display a text area, render the built-in browser <textarea> component.

<textarea name="postContent" />

See more examples below.

Props

<textarea> supports all common element props.

You can make a text area controlled by passing a value prop:

• value: A string. Controls the text inside the text area.

When you pass value, you must also pass an onChange handler that updates the passed value.

If your <textarea> is uncontrolled, you may pass the defaultValue prop instead:

• defaultValue: A string. Specifies the initial value for a text area.

These <textarea> props are relevant both for uncontrolled and controlled text areas:

• autoComplete: Either 'on' or 'off'. Specifies the autocomplete behavior.
• autoFocus: A boolean. If true, React will focus the element on mount.
• children: <textarea> does not accept children. To set the initial value, use defaultValue.
• cols: A number. Specifies the default width in average character widths. Defaults to 20.
• disabled: A boolean. If true, the input will not be interactive and will appear dimmed.
• form: A string. Specifies the id of the <form> this input belongs to. If omitted, it’s the closest parent form.
• maxLength: A number. Specifies the maximum length of text.
• minLength: A number. Specifies the minimum length of text.
• name: A string. Specifies the name for this input that’s submitted with the form.
• onChange: An Event handler function. Required for controlled text areas. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event.
• onChangeCapture: A version of onChange that fires in the capture phase.
• onInput: An Event handler function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use onChange instead which works similarly.
• onInputCapture: A version of onInput that fires in the capture phase.
• onInvalid: An Event handler function. Fires if an input fails validation on form submit. Unlike the built-in invalid event, the React onInvalid event bubbles.
• onInvalidCapture: A version of onInvalid that fires in the capture phase.
• onSelect: An Event handler function. Fires after the selection inside the <textarea> changes. React extends the onSelect event to also fire for empty selection and on edits (which may affect the selection).
• onSelectCapture: A version of onSelect that fires in the capture phase.
• placeholder: A string. Displayed in a dimmed color when the text area value is empty.
• readOnly: A boolean. If true, the text area is not editable by the user.
• required: A boolean. If true, the value must be provided for the form to submit.
• rows: A number. Specifies the default height in average character heights. Defaults to 2.
• wrap: Either 'hard', 'soft', or 'off'. Specifies how the text should be wrapped when submitting a form.

Caveats

• Passing children like <textarea>something</textarea> is not allowed. Use defaultValue for initial content.
• If a text area receives a string value prop, it will be treated as controlled.
• A text area can’t be both controlled and uncontrolled at the same time.
• A text area cannot switch between being controlled or uncontrolled over its lifetime.
• Every controlled text area needs an onChange event handler that synchronously updates its backing value.

Usage