Q: How is Textarea different from Input?

Input is a single-line ` ` for short values (names, emails, URLs). Textarea is a multi-line ` ` for long-form content (paragraphs of text, code blocks, prompts). Pick by content length: under ~80 characters → Input; longer or multi-paragraph → Textarea. Textareas can grow with content (auto-resize) where Inputs always stay one line.

Question 1

What is a shadcn textarea?

Accepted Answer

A shadcn Textarea is the styled `<textarea>` element for multi-line text input — comments, descriptions, message bodies, bio fields, support tickets, prompt boxes. It's built on the native HTML textarea (no JS overhead) styled with shadcn/ui to match Input's design language plus a min-height and resize handle.

Question 2

Are these textarea examples free?

Accepted Answer

Yes, every textarea example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

How is Textarea different from Input?

Accepted Answer

Input is a single-line `` for short values (names, emails, URLs). Textarea is a multi-line `

Question 4

When should I auto-resize the textarea versus fix its height?

Accepted Answer

Auto-resize for content where length is unpredictable and you want to give users a comfortable space to write — comments, replies, AI prompt boxes (Cmd+K, ChatGPT). Fixed height with internal scroll for forms with structured fields where layout stability matters more than length comfort — bio fields in settings, address fields, structured descriptions.

Question 5

How do I make the textarea auto-resize as users type?

Accepted Answer

Track content height via a small effect: `useEffect(() => { textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px' }, [value])`. Set `resize-none` on the textarea to disable manual resize handle. Cap the max height with `max-h-[300px] overflow-y-auto` so very long content scrolls inside instead of growing infinitely. Used by ChatGPT, Notion comments, Linear descriptions.

Question 6

How do I show a character count below the textarea?

Accepted Answer

Render `

{value.length} / {maxLength}

` below the textarea. For nearing-limit feedback (warning at 90%, error at 100%), conditionally color the count: `value.length > maxLength * 0.9 ? 'text-amber-600' : value.length === maxLength ? 'text-destructive' : 'text-muted-foreground'`. Pair with `maxLength={n}` on the textarea so the browser enforces the limit.

Question 7

How do I add a label and description to the textarea?

Accepted Answer

Use the labeled variant. Wrap Label + Textarea + optional Description in a Field. The Label uses `htmlFor` to focus the textarea on click. The Description sits below the textarea via `aria-describedby` so screen readers announce it on focus. shadcn's Field primitive does this wiring automatically.

Question 8

How do I install a textarea example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/textarea/…`, plus the shadcn/ui Textarea primitive if you don't already have it.

Question 9

How do I integrate the textarea with react-hook-form?

Accepted Answer

Wrap Textarea in shadcn's FormField. Pass `field.value` to `value` and `field.onChange` to `onChange`. The form value is a string. For Zod, `z.string().min(10).max(500)` for a length-bounded text field. For markdown / rich-text textareas, store the raw markdown string and render-on-display with a markdown library.

Question 10

How do I submit the textarea on Cmd+Enter (chat-style)?

Accepted Answer

Add `onKeyDown` handler: `if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); submit() }`. Common pattern in chat apps, comment boxes, and AI prompt inputs. Display the keyboard hint inside / next to the textarea so users discover it ("Press Cmd+Enter to send"). Don't override plain Enter — that's still "new line" in a textarea.

Question 11

Which libraries do textarea examples depend on?

Accepted Answer

shadcn/ui Textarea (the styled wrapper for native `<textarea>`, generated into your project), Tailwind CSS. React 19 baseline. No state library — value lives in `useState` or your form library. For auto-resize, no extra dependency — just the height-recalc effect described above.

Question 12

Are textarea examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. The Textarea renders a real native `<textarea>` so all browser behaviors work normally: keyboard Enter for new lines, Tab moves to next field, screen readers announce label + description, browser autocorrect / spellcheck applies. For required state, use `required` attribute (HTML5 validation) plus `aria-required="true"` for redundancy.

Question 13

Can I use these textarea examples with React Server Components?

Accepted Answer

Static textareas (uncontrolled, native HTML form submission) render cleanly as Server Components. Controlled textareas (auto-resize, character count, value-driven UI) need a client boundary. For Next.js Server Actions: the form can use `<form action={serverAction}>` with native uncontrolled textareas — no client wrapper needed for the simple case.

React Textarea Examples for shadcn/ui

Browse every textarea example

Frequently Asked Questions