How to Add a Textarea to a React App

Before installing the Textarea, confirm your React project has the two things Drivn assumes: Tailwind CSS v4 installed and processing your styles, and a @/ path alias pointing at your source directory — the component ships as a .tsx file, so TypeScript is part of the stack. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, both are already wired; for a custom setup the installation page lists the minimal config. The Textarea has no third-party import past React and the local cn utility, and no other Drivn component as a dependency, so nothing else needs to be present first. Unlike a dialog or a tabs component, it holds no state and runs no effect, so its source has no 'use client' directive — you can render it in a Server Component or a client component without thinking about the boundary.

Run the CLI from your project root to add the Textarea source file. The command prompts once for your install directory (defaulting to src/components/ui/) and writes a single textarea.tsx — no other files, because the component's only dependency past React is the cn utility. No global config file is created; the result is TypeScript source you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install. Because the file is yours after install, future Drivn releases will not overwrite your edits — the whole component, from the styles.base object to the forwardRef, is one short file you can read top to bottom.

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 reader can drag the bottom edge 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. Because the component spreads {...props} onto the underlying <textarea>, add rows={5} to set the initial visible height or name="message" so the value is included when the surrounding <form> submits. This is the right default for a contact message, a quick note, or a description field. See the full prop list on the Textarea reference.

To read or limit the value as the reader types, switch to controlled mode: hold the text in React.useState, pass value, and update it in onChange from e.target.value. Because the Textarea forwards every native attribute, add maxLength to cap the length and read value.length to render a live counter beneath the field. This wrapper owns state, so it opens with a 'use client' directive. It is the pattern for a tweet-style box, a review with a length limit, or a bio field where you show remaining characters — drop a Button below it to submit. The onChange handler receives the standard React change event, the same signature you would use with a raw <textarea>, so there is no adapter to learn.

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 element, so there is nothing special to wire. This is how it sits beside an Input in a contact or feedback form: matching widths, matching border tokens, one labelled field per row. And because the ref forwards to the DOM node, the same field works with react-hook-form — spread register("message") onto the Textarea and it registers exactly like a native control, with no Controller wrapper needed for the common case.