Shadcn Textarea

You know those tiny input fields that make you write a novel in a single line? Ever tried typing a meaningful comment or feedback in a cramped text box that scrolls horizontally? It's maddening. Textareas give users room to breathe when they need to write more than a quick response—comments, feedback, descriptions, messages—anywhere you need actual paragraphs instead of cramped single lines. This shadcn/ui textarea makes multi-line input feel natural in your React applications.

Textarea showcase

Simple multi-line input with helper text:

"use client"import { Label } from "@/components/ui/label"import { Textarea } from "@/components/ui/textarea"export default function TextareaDemo() {  return (    <div className="grid w-full max-w-sm gap-1.5 p-6">      <Label htmlFor="message">Your message</Label>      <Textarea         placeholder="Type your message here."         id="message"      />      <p className="text-sm text-muted-foreground">        Your message will be copied to the support team.      </p>    </div>  )}

"use client"import * as React from "react"import * as LabelPrimitive from "@radix-ui/react-label"import { cn } from "@/lib/utils"function Label({  className,  ...props}: React.ComponentProps<typeof LabelPrimitive.Root>) {  return (    <LabelPrimitive.Root      data-slot="label"      className={cn(        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",        className      )}      {...props}    />  )}export { Label }

Clean textarea with proper labeling and helper text. This free open source React component extends the native textarea with consistent styling and full accessibility support. Built with TypeScript for full type safety while styled with Tailwind CSS to match your design system.

npx shadcn@latest add textarea

Why textareas beat cramped single-line inputs

Here's the thing—regular inputs work great for names and emails, but when users need to actually communicate something meaningful, those tiny boxes become torture devices. Ever tried writing a support ticket in a single line? Or leaving product feedback that's longer than a tweet?

Textareas respect how people actually write. You can see your whole message. You can edit without losing your place. You can think in paragraphs, not fragments. Mobile keyboards don't fight you. Line breaks work like they should.

This free shadcn textarea handles the foundation—proper labeling, validation states, character limits, resize behavior. Whether you're building comment systems, feedback forms, or content creation tools in your Next.js applications, textareas that work like users expect keep your JavaScript projects feeling professional.

Common textarea patterns you'll actually build

Disabled state for readonly content

When users shouldn't edit existing content:

"use client"import { useId } from "react"import { Label } from "@/components/ui/label"import { Textarea } from "@/components/ui/textarea"export default function TextareaDisabled() {  const id = useId()  return (    <div className="w-full max-w-sm space-y-2 p-6">      <Label htmlFor={id}>Disabled textarea</Label>      <Textarea placeholder="Type your feedback here" disabled id={id} />    </div>  )}

"use client"import * as React from "react"import * as LabelPrimitive from "@radix-ui/react-label"import { cn } from "@/lib/utils"function Label({  className,  ...props}: React.ComponentProps<typeof LabelPrimitive.Root>) {  return (    <LabelPrimitive.Root      data-slot="label"      className={cn(        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",        className      )}      {...props}    />  )}export { Label }

Character limits with live feedback

Bio fields and comment forms with remaining character count:

"use client"import { useId, useState, type ChangeEvent } from "react"import { Label } from "@/components/ui/label"import { Textarea } from "@/components/ui/textarea"const maxLength = 200const initialValue = ""export default function TextareaCharacterLimit() {  const [value, setValue] = useState(initialValue)  const [characterCount, setCharacterCount] = useState(initialValue.length)  const id = useId()  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {    if (e.target.value.length <= maxLength) {      setValue(e.target.value)      setCharacterCount(e.target.value.length)    }  }  return (    <div className="w-full max-w-sm space-y-2 p-6">      <Label htmlFor={id}>Textarea with character limit</Label>      <Textarea         placeholder="Type your feedback here"         value={value}         maxLength={maxLength}         onChange={handleChange}         id={id}      />      <p className="text-muted-foreground text-xs">        <span className="tabular-nums">{maxLength - characterCount}</span> characters left      </p>    </div>  )}

"use client"import * as React from "react"import * as LabelPrimitive from "@radix-ui/react-label"import { cn } from "@/lib/utils"function Label({  className,  ...props}: React.ComponentProps<typeof LabelPrimitive.Root>) {  return (    <LabelPrimitive.Root      data-slot="label"      className={cn(        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",        className      )}      {...props}    />  )}export { Label }

Filled variant for subtle interfaces

Alternative styling that blends with backgrounds:

"use client"import { useId } from "react"import { Label } from "@/components/ui/label"import { Textarea } from "@/components/ui/textarea"export default function TextareaFilled() {  const id = useId()  return (    <div className="w-full max-w-sm space-y-2 p-6">      <Label htmlFor={id}>Filled textarea</Label>      <Textarea         className="bg-muted border-transparent shadow-none"         placeholder="Type your feedback here"         id={id}       />    </div>  )}

"use client"import * as React from "react"import * as LabelPrimitive from "@radix-ui/react-label"import { cn } from "@/lib/utils"function Label({  className,  ...props}: React.ComponentProps<typeof LabelPrimitive.Root>) {  return (    <LabelPrimitive.Root      data-slot="label"      className={cn(        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",        className      )}      {...props}    />  )}export { Label }

These patterns demonstrate essential textarea functionality: disabled states for readonly content, character counting for user guidance, and visual variants for different interfaces. Each serves a distinct purpose in real applications.

Features

This free open source textarea component includes everything you need:

• TypeScript-first - Full type safety with controlled and uncontrolled modes in React
• Native HTML foundation - Built on standard textarea with enhanced styling
• Validation ready - Works seamlessly with form libraries and error states
• Tailwind CSS styled - Customize with utilities, not fighting textarea-specific CSS
• Character limits - Built-in support for maxLength with visual feedback
• Resize control - Choose how users can adjust textarea dimensions
• Accessibility built-in - Screen readers understand content and validation states
• Mobile optimized - Proper keyboard handling and touch-friendly sizing

API Reference

Component Props

Resize Options

Styling Hooks

Production tips

Set appropriate initial height based on expected content length. This free shadcn/ui textarea component uses the rows prop to control initial size—3 rows for comments, 6-8 for feedback forms, 10+ for content creation. Users can resize if needed, but starting with the right size reduces friction.

Show character limits before users hit them, not after. Nothing's more frustrating than typing a long message only to discover you're over the limit. This TypeScript component supports maxLength natively—pair it with a character counter that updates as users type, showing remaining characters in a helpful way.

Enable auto-save for longer content to prevent data loss. When users might spend time crafting responses, implement draft saving. This open source shadcn textarea provides controlled state—use it with localStorage or your backend to preserve user work across sessions and browser crashes.

Use consistent content heights to avoid jarring layout shifts. When textarea panels have very different heights, switching feels jumpy. This React component maintains focus—you ensure content feels stable. Consider min-height constraints or skeleton loading for dynamic content.

Integration with other components

Textareas naturally pair with Form components for validation and error handling in your React applications. Use Label components for proper accessibility and Card components for comment and feedback layouts.

For character counting, combine textareas with Badge components to show remaining characters or Progress components for visual length indicators. This open source pattern provides clear feedback without cluttering the interface.

When building content creation tools, use textareas with Button components for submit actions and Separator components to organize complex forms. Alert components work well for validation messages that need more context than inline errors.

For advanced scenarios, pair textareas with Popover components for formatting tools or Dialog components for rich text editing options. Your JavaScript application can compose these shadcn components for complete content management experiences.

Questions you might have