Textarea

Captures multi-line user input for forms, comments, and longer text content. Perfect for feedback forms and messaging in React applications with Next.js, TypeScript, and Tailwind CSS.

You know those tiny input fields that make you write a novel in a single line? 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.

Basic textarea with label

Simple multi-line input with helper text:

Loading component...

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.

npx shadcn@latest add textarea

Why textareas matter for user input

Regular inputs work for names and emails, but textareas handle real communication:

Natural writing - Users can see multiple lines while typing
Better context - Entire message visible without scrolling horizontally
Edit friendly - Easy to review and revise before submitting
Mobile optimized - Soft keyboards work better with vertical space
Character awareness - Users can gauge message length visually
Formatting preservation - Line breaks and paragraphs stay intact

Real-world textarea patterns

Form validation

Bio field with character limits:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Interactive comments

Auto-resizing with character counter:

Loading component...

"use client"import * as React from "react"import { Button } from "@/components/ui/button"import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"import { Label } from "@/components/ui/label"import { Textarea } from "@/components/ui/textarea"import { Badge } from "@/components/ui/badge"import { MessageSquare, Send } from "lucide-react"export default function TextareaAutoResize() {  const [value, setValue] = React.useState("")  const [comments, setComments] = React.useState<string[]>([    "Great work on this! The implementation looks solid.",    "Could we add some error handling here?",  ])    const textareaRef = React.useRef<HTMLTextAreaElement>(null)    React.useEffect(() => {    if (textareaRef.current) {      textareaRef.current.style.height = "auto"      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`    }  }, [value])    const handleSubmit = (e: React.FormEvent) => {    e.preventDefault()    if (value.trim()) {      setComments([...comments, value])      setValue("")    }  }    const charCount = value.length  const maxChars = 500    return (    <Card className="w-full max-w-2xl">      <CardHeader>        <CardTitle className="flex items-center gap-2">          <MessageSquare className="h-5 w-5" />          Discussion        </CardTitle>        <CardDescription>          Join the conversation and share your thoughts        </CardDescription>      </CardHeader>      <CardContent className="space-y-4">        <div className="space-y-3">          {comments.map((comment, index) => (            <div key={index} className="rounded-lg border p-3 text-sm">              {comment}            </div>          ))}        </div>                <form onSubmit={handleSubmit} className="space-y-4">          <div className="space-y-2">            <div className="flex items-center justify-between">              <Label htmlFor="comment">Add a comment</Label>              <Badge variant={charCount > maxChars ? "destructive" : "secondary"}>                {charCount}/{maxChars}              </Badge>            </div>            <Textarea              ref={textareaRef}              id="comment"              placeholder="Share your thoughts..."              value={value}              onChange={(e) => setValue(e.target.value.slice(0, maxChars))}              className="min-h-[80px] resize-none overflow-hidden"              onKeyDown={(e) => {                if (e.key === "Enter" && e.metaKey) {                  handleSubmit(e)                }              }}            />            <p className="text-xs text-muted-foreground">              Press ⌘+Enter to submit            </p>          </div>        </form>      </CardContent>      <CardFooter>        <Button           onClick={handleSubmit}           disabled={!value.trim() || charCount > maxChars}          className="w-full"        >          <Send className="mr-2 h-4 w-4" />          Post Comment        </Button>      </CardFooter>    </Card>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

These examples show textareas doing real work - form validation, comment systems, character counting. Each pattern solves specific user needs for longer text input.

Prop	Type	Default	Description
`placeholder`	`string`	-	Placeholder text when empty
`value`	`string`	-	Controlled value of the textarea
`defaultValue`	`string`	-	Uncontrolled default value
`onChange`	`(event) => void`	-	Change event handler
`disabled`	`boolean`	`false`	Disables the textarea
`readOnly`	`boolean`	`false`	Makes textarea read-only
`required`	`boolean`	`false`	Makes field required in forms
`rows`	`number`	-	Visible text lines
`cols`	`number`	-	Visible width in characters
`maxLength`	`number`	-	Maximum character length
`minLength`	`number`	-	Minimum character length
`wrap`	`"hard" \| "soft" \| "off"`	`"soft"`	How text wraps
`className`	`string`	-	Additional CSS classes

Resize Behavior

Control how users can resize the textarea:

Class	CSS Property	Description
`resize-none`	`resize: none`	Prevents resizing (default)
`resize`	`resize: both`	Allows horizontal and vertical
`resize-y`	`resize: vertical`	Vertical resizing only
`resize-x`	`resize: horizontal`	Horizontal resizing only

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Auto-resize with character counter

Loading component...

"use client"import * as React from "react"import { Button } from "@/components/ui/button"import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"import { Label } from "@/components/ui/label"import { Textarea } from "@/components/ui/textarea"import { Badge } from "@/components/ui/badge"import { MessageSquare, Send } from "lucide-react"export default function TextareaAutoResize() {  const [value, setValue] = React.useState("")  const [comments, setComments] = React.useState<string[]>([    "Great work on this! The implementation looks solid.",    "Could we add some error handling here?",  ])    const textareaRef = React.useRef<HTMLTextAreaElement>(null)    React.useEffect(() => {    if (textareaRef.current) {      textareaRef.current.style.height = "auto"      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`    }  }, [value])    const handleSubmit = (e: React.FormEvent) => {    e.preventDefault()    if (value.trim()) {      setComments([...comments, value])      setValue("")    }  }    const charCount = value.length  const maxChars = 500    return (    <Card className="w-full max-w-2xl">      <CardHeader>        <CardTitle className="flex items-center gap-2">          <MessageSquare className="h-5 w-5" />          Discussion        </CardTitle>        <CardDescription>          Join the conversation and share your thoughts        </CardDescription>      </CardHeader>      <CardContent className="space-y-4">        <div className="space-y-3">          {comments.map((comment, index) => (            <div key={index} className="rounded-lg border p-3 text-sm">              {comment}            </div>          ))}        </div>                <form onSubmit={handleSubmit} className="space-y-4">          <div className="space-y-2">            <div className="flex items-center justify-between">              <Label htmlFor="comment">Add a comment</Label>              <Badge variant={charCount > maxChars ? "destructive" : "secondary"}>                {charCount}/{maxChars}              </Badge>            </div>            <Textarea              ref={textareaRef}              id="comment"              placeholder="Share your thoughts..."              value={value}              onChange={(e) => setValue(e.target.value.slice(0, maxChars))}              className="min-h-[80px] resize-none overflow-hidden"              onKeyDown={(e) => {                if (e.key === "Enter" && e.metaKey) {                  handleSubmit(e)                }              }}            />            <p className="text-xs text-muted-foreground">              Press ⌘+Enter to submit            </p>          </div>        </form>      </CardContent>      <CardFooter>        <Button           onClick={handleSubmit}           disabled={!value.trim() || charCount > maxChars}          className="w-full"        >          <Send className="mr-2 h-4 w-4" />          Post Comment        </Button>      </CardFooter>    </Card>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Form Integration

The textarea integrates seamlessly with React Hook Form and other form libraries. Check the form validation example above to see how validation, error messages, and character limits work together.

Accessibility Features

Built-in accessibility support includes:

Label association - Properly linked with Label components
ARIA attributes - Supports aria-label, aria-describedby
Keyboard navigation - Full keyboard support
Focus management - Clear focus indicators
Screen reader support - Announces character limits and validation
Error states - Accessible error messages with FormMessage
Required indication - Clear required field marking

Design tips for textareas

Keep these principles in mind when using textareas:

Size appropriately - Match height to expected content length
Show limits clearly - Display character counts before hitting limit
Provide examples - Placeholder text should guide users
Enable spell check - Unless handling code or technical content
Consider auto-save - For longer content that might be lost
Allow formatting - Consider rich text for complex content
Resize thoughtfully - Vertical resize usually makes most sense
Mobile test - Ensure comfortable typing on small screens
Preserve drafts - Don't lose user input on navigation
Clear submission - Show what happens after submit

Basic textarea with label

Why textareas matter for user input

Real-world textarea patterns

Form validation

Interactive comments

Perfect for content input

API Reference

Textarea

Resize Behavior

Common Patterns

Basic textarea with helper text

Form integration with validation

Auto-resize with character counter

Form Integration

Accessibility Features

Design tips for textareas

On this page

Textarea

Reactlabel

Reacttextarea

Reactbutton

Reactform

Reacttextarea

Reactbutton

Reactcard

Reactlabel

Reacttextarea

Reactbadge

Reactlabel

Reacttextarea

Reactbutton

Reactform

Reacttextarea

Reactbutton

Reactcard

Reactlabel

Reacttextarea

Reactbadge

On this page