React Textarea Component Examples

The simplest use is an uncontrolled Textarea with a placeholder. It renders a full-width box with a min-h-[80px] starting height, a rounded border-input border, and a muted placeholder, and the user can drag the bottom edge to make it taller because the base styles include resize-y. You write no state and no handlers — the browser owns the value until you read it from the form on submit.

This is the right default for most cases: a contact form message, a quick note field, a description box. Because the component spreads {...props} onto the underlying <textarea>, you can add rows={5} to set the initial visible height or name="message" so the value is included when the surrounding <form> submits. See the full prop list on the Textarea reference.

To read or limit the value as the user types, switch to controlled mode by holding the text in React.useState and passing value and onChange. Because the Textarea forwards every native attribute, you add maxLength to cap the length and read value.length to render a live counter beneath the field. The wrapper is marked 'use client' for the useState hook.

This is the pattern for a tweet-style box, a review with a length limit, or any field where you want to show remaining characters — drop a Button below it to submit. The onChange handler receives the standard React change event, so you read e.target.value and store it — the same signature you would use with a native textarea, no adapter needed. Pair the counter text with a muted colour so it sits quietly under the field.

In a real form you want a label tied to the field for accessibility. Wrap a native <label> and the Textarea together, link them with a shared htmlFor/id, and give the textarea a name so its value is captured on submit. The Textarea spreads these attributes straight onto the <textarea>, so there is nothing special to wire — it behaves like the element it wraps.

This is how the Textarea sits next to an Input in a contact or feedback form: matching widths, matching border tokens, one labelled field per row. Because the ref forwards to the DOM node, the same field works with react-hook-form's register — spread register("message") onto the Textarea and it registers exactly like a native control, with no Controller wrapper required.

Pass the native disabled attribute to lock the field. The base styles include disabled:opacity-50 disabled:cursor-default, so a disabled Textarea dims to half opacity and drops the text cursor, signalling clearly that it cannot be edited. This is the state for a read-only message during submission, a field gated behind a toggle, or content awaiting a permission.

Because disabled is a real DOM attribute spread onto the <textarea>, the browser also excludes the field from form submission and skips it in tab order — you get the full native disabled behaviour, not just the visual dimming. To show non-editable content that should still be selectable and submitted, use readOnly instead of disabled; both pass through the same way since the props type is the native React.TextareaHTMLAttributes.