Clean • Professional
In React, a textarea is treated similarly to other input elements, but it allows multi-line text input. You can use controlled or uncontrolled approaches to manage textarea data.
A controlled textarea is bound to React state. This gives you full control over its value and makes it easy to handle updates, validations, and submissions.
Example – Controlled Textarea
import React, { useState } from "react";
function ControlledTextarea() {
const [message, setMessage] = useState("");
const handleChange = (e) => {
setMessage(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
alert(`Submitted Message: ${message}`);
};
return (
<form onSubmit={handleSubmit}>
<label>
Message:
<textareavalue={message}
onChange={handleChange}
placeholder="Type your message here..."
rows={5}
cols={40}
/>
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
export default ControlledTextarea;
value={message} binds the textarea to state.onChange updates the state when the user types.rows and cols set the visible size of the textarea.An uncontrolled textarea is managed by the DOM, not by React state. You access its value using a ref.
Example – Uncontrolled Textarea
import React, { useRef } from "react";
function UncontrolledTextarea() {
const messageRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
alert(`Submitted Message: ${messageRef.current.value}`);
};
return (
<form onSubmit={handleSubmit}>
<label>
Message:
<textarearef={messageRef}
placeholder="Type your message here..."
rows={5}
cols={40}
/>
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
export default UncontrolledTextarea;
ref={messageRef} accesses the DOM element.You can also style textareas dynamically using inline styles:
React requires camelCase for CSS properties (e.g., backgroundColor instead of background-color).
const textareaStyle = {
padding: "10px",
borderRadius: "5px",
border: "1px solid #ccc",
width: "100%",
fontSize: "16px",
};
<textarea style={textareaStyle} rows={6} placeholder="Styled Textarea" />
You can combine textarea with other controlled inputs in a form state object:
import React, { useState } from "react";
function MultiInputForm() {
const [form, setForm] = useState({ name: "", message: "" });
const handleChange = (e) => {
const { name, value } = e.target;
setForm({ ...form, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
console.log("Form Submitted:", form);
};
return (
<form onSubmit={handleSubmit}>
<inputtype="text"
name="name"
value={form.name}
onChange={handleChange}
placeholder="Name"
/>
<br />
<textareaname="message"
value={form.message}
onChange={handleChange}
rows={5}
cols={40}
placeholder="Message"
/>
<br />
<button type="submit">Submit</button>
</form>
);
}
export default MultiInputForm;
input and textarea are controlled components.