20/02/2025, 18:27 <textarea> – React

v19

API REFERENCE COMPONENTS

<textarea>
The built-in browser <textarea> component lets you render a
multiline text input.

<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.

https://react.dev/reference/react-dom/components/textarea 1/14
20/02/2025, 18:27 <textarea> – React

<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.

https://react.dev/reference/react-dom/components/textarea 2/14
20/02/2025, 18:27 <textarea> – React

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.
https://react.dev/reference/react-dom/components/textarea 3/14
20/02/2025, 18:27 <textarea> – React

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

Displaying a text area

Render <textarea> to display a text area. You can specify its default size
with the rows and cols attributes, but by default the user will be able to
resize it. To disable resizing, you can specify resize: none in the CSS.

App.js Download Reset

export default function NewPost() {

return (
<label>
Write your post:
<textarea name="postContent" rows={4} cols={40} />
</label>
);
}

https://react.dev/reference/react-dom/components/textarea 4/14
20/02/2025, 18:27 <textarea> – React

Providing a label for a text area

Typically, you will place every <textarea> inside a <label> tag. This tells the
browser that this label is associated with that text area. When the user clicks
the label, the browser will focus the text area. It’s also essential for
accessibility: a screen reader will announce the label caption when the user
focuses the text area.

If you can’t nest <textarea> into a <label> , associate them by passing the
same ID to <textarea id> and <label htmlFor> . To avoid conflicts
between instances of one component, generate such an ID with useId .

App.js Download Reset

import { useId } from 'react';

export default function Form() {

const postTextAreaId = useId();
return (
<>
<label htmlFor={postTextAreaId}>
Write your post:
</label>
<textarea
id={postTextAreaId}
name="postContent"

Show more

https://react.dev/reference/react-dom/components/textarea 5/14
20/02/2025, 18:27 <textarea> – React

Providing an initial value for a text area

You can optionally specify the initial value for the text area. Pass it as the
defaultValue string.

App.js Download Reset

export default function EditPost() {

return (
<label>
Edit your post:
<textarea
name="postContent"
defaultValue="I really enjoyed biking yesterday!"
rows={4}
cols={40}
/>
</label>
);

https://react.dev/reference/react-dom/components/textarea 6/14
20/02/2025, 18:27 <textarea> – React

Pitfall

Unlike in HTML, passing initial text like <textarea>Some

content</textarea> is not supported.

Reading the text area value when submitting a form

Add a <form> around your textarea with a <button type="submit"> inside.

It will call your <form onSubmit> event handler. By default, the browser will
send the form data to the current URL and refresh the page. You can override
that behavior by calling e.preventDefault() . Read the form data with new
FormData(e.target) .

App.js Download Reset

export default function EditPost() {

function handleSubmit(e) {
// Prevent the browser from reloading the page
e.preventDefault();

// Read the form data

const form = e.target;
const formData = new FormData(form);

// You can pass formData as a fetch body directly:

https://react.dev/reference/react-dom/components/textarea 7/14
20/02/2025, 18:27 <textarea> – React

fetch('/some-api', { method: form.method, body: formData });

Show more

Note

Give a name to your <textarea> , for example <textarea

name="postContent" /> . The name you specified will be used as a

key in the form data, for example { postContent: "Your post" } .

Pitfall

By default, any <button> inside a <form> will submit it. This can be
surprising! If you have your own custom Button React component,
consider returning <button type="button"> instead of <button> .

https://react.dev/reference/react-dom/components/textarea 8/14
20/02/2025, 18:27 <textarea> – React

Then, to be explicit, use <button type="submit"> for buttons that

are supposed to submit the form.

Controlling a text area with a state variable

A text area like <textarea /> is uncontrolled. Even if you pass an initial value
like <textarea defaultValue="Initial text" /> , your JSX only specifies
the initial value, not the value right now.

To render a controlled text area, pass the value prop to it. React will force
the text area to always have the value you passed. Typically, you will control
a text area by declaring a state variable:

function NewPost() {
const [postContent, setPostContent] = useState(''); // Declare a state v
// ...
return (
<textarea
value={postContent} // ...force the input's value to match the state
onChange={e => setPostContent(e.target.value)} // ... and update the
/>
);
}

This is useful if you want to re-render some part of the UI in response to

every keystroke.

package.json App.js MarkdownPreview.js Reset

{
"dependencies": {
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
https://react.dev/reference/react-dom/components/textarea 9/14
20/02/2025, 18:27 <textarea> – React

"remarkable": "2.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"

Pitfall

If you pass value without onChange , it will be impossible to type

into the text area. When you control a text area by passing some
value to it, you force it to always have the value you passed. So if

you pass a state variable as a value but forget to update that state
variable synchronously during the onChange event handler, React will
revert the text area after every keystroke back to the value that you
specified.

https://react.dev/reference/react-dom/components/textarea 10/14
20/02/2025, 18:27 <textarea> – React

Troubleshooting

My text area doesn’t update when I type into it

If you render a text area with value but no onChange , you will see an error in
the console:

// 🔴 Bug: controlled text area with no onChange handler

<textarea value={something} />

Console

You provided a value prop to a form field without an

onChange handler. This will render a read-only field. If the

field should be mutable use defaultValue . Otherwise, set

either onChange or readOnly .

As the error message suggests, if you only wanted to specify the initial value,
pass defaultValue instead:

// ✅ Good: uncontrolled text area with an initial value

<textarea defaultValue={something} />

If you want to control this text area with a state variable, specify an
onChange handler:

// ✅ Good: controlled text area with onChange

<textarea value={something} onChange={e => setSomething(e.target.value)} /

If the value is intentionally read-only, add a readOnly prop to suppress the

error:
https://react.dev/reference/react-dom/components/textarea 11/14
20/02/2025, 18:27 <textarea> – React

// ✅ Good: readonly controlled text area without on change

<textarea value={something} readOnly={true} />

My text area caret jumps to the beginning on every

keystroke

If you control a text area, you must update its state variable to the text area’s
value from the DOM during onChange .

You can’t update it to something other than e.target.value :

function handleChange(e) {
// 🔴 Bug: updating an input to something other than e.target.value
setFirstName(e.target.value.toUpperCase());
}

You also can’t update it asynchronously:

function handleChange(e) {
// 🔴 Bug: updating an input asynchronously
setTimeout(() => {
setFirstName(e.target.value);
}, 100);
}

To fix your code, update it synchronously to e.target.value :

function handleChange(e) {
// ✅ Updating a controlled input to e.target.value synchronously
setFirstName(e.target.value);
}

https://react.dev/reference/react-dom/components/textarea 12/14
20/02/2025, 18:27 <textarea> – React

If this doesn’t fix the problem, it’s possible that the text area gets removed
and re-added from the DOM on every keystroke. This can happen if you’re
accidentally resetting state on every re-render. For example, this can happen
if the text area or one of its parents always receives a different key attribute,
or if you nest component definitions (which is not allowed in React and
causes the “inner” component to remount on every render).

I’m getting an error: “A component is changing an

uncontrolled input to be controlled”

If you provide a value to the component, it must remain a string throughout

its lifetime.

You cannot pass value={undefined} first and later pass value="some

string" because React won’t know whether you want the component to be

uncontrolled or controlled. A controlled component should always receive a

string value , not null or undefined .

If your value is coming from an API or a state variable, it might be initialized

to null or undefined . In that case, either set it to an empty string ( '' )
initially, or pass value={someValue ?? ''} to ensure value is a string.

PREVIOUS

<select>

NEXT

<link>

https://react.dev/reference/react-dom/components/textarea 13/14
20/02/2025, 18:27 <textarea> – React

Copyright © Meta Platforms, Inc

uwu?

Learn React API Reference

Quick Start React APIs

Installation React DOM APIs

Describing the UI

Adding Interactivity

Managing State

Escape Hatches

Community More

Code of Conduct Blog

Meet the Team React Native

Docs Contributors Privacy

Acknowledgements Terms

https://react.dev/reference/react-dom/components/textarea 14/14