Creative Tim UICreative Tim UI

Shadcn Textarea

PreviousNext

A multi-line text input component that allows users to enter and edit longer text content, perfect for comments, messages, and descriptions.

import { Textarea } from "@/components/ui/textarea"

export function TextareaDemo() {
  return <Textarea placeholder="Message here..." />
}

Installation

pnpm dlx @creative-tim/ui@latest add textarea

Usage

import { Textarea } from "@/components/ui/textarea"
<Textarea placeholder="Enter your message..." />

Examples

Textarea Colors

Textarea components with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different input states and provide visual feedback.

import { Textarea } from "@/components/ui/textarea"

export function TextareaColors() {
  return (
    <div className="w-full space-y-4">
      <Textarea
        placeholder="Textarea Primary"
        className="border-primary focus-visible:ring-primary/20"
      />
      <Textarea
        placeholder="Textarea Secondary"
        className="border-secondary focus-visible:ring-secondary/20"
      />
      <Textarea
        placeholder="Textarea Info"
        className="border-blue-500 focus-visible:ring-blue-500/20"
      />
      <Textarea
        placeholder="Textarea Success"
        className="border-green-500 focus-visible:ring-green-500/20"
      />
      <Textarea
        placeholder="Textarea Warning"
        className="border-yellow-500 focus-visible:ring-yellow-500/20"
      />
      <Textarea
        placeholder="Textarea Error"
        className="border-destructive focus-visible:ring-destructive/20"
      />
    </div>
  )
}

Textarea Sizes

Textarea components in different sizes (small, medium, large) to accommodate various layout requirements and provide flexibility in design.

import { Textarea } from "@/components/ui/textarea"

export function TextareaSizes() {
  return (
    <div className="w-full space-y-4">
      <Textarea
        placeholder="Textarea Small"
        className="min-h-12 py-1.5 text-sm"
      />
      <Textarea placeholder="Textarea Medium" className="min-h-16" />
      <Textarea
        placeholder="Textarea Large"
        className="min-h-20 py-3 text-base"
      />
    </div>
  )
}

Textarea Disabled

A disabled textarea that cannot be interacted with, useful for displaying read-only content or temporarily restricting user input.

import { Textarea } from "@/components/ui/textarea"

export function TextareaDisabled() {
  return <Textarea disabled placeholder="Message here..." />
}

Textarea with Label

A textarea component with an associated label that provides clear context and improves accessibility by properly linking the label to the input field.

import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function TextareaWithLabel() {
  return (
    <div className="w-full space-y-1.5">
      <Label htmlFor="message" className="text-sm font-semibold">
        Message
      </Label>
      <Textarea id="message" placeholder="Your message..." />
    </div>
  )
}

Textarea with Helper Text

A textarea component with helper text that provides additional guidance, instructions, or character limits to help users understand what to enter.

Use at least 255 characters and a maximum of 1000 characters.

import { Info } from "lucide-react"

import { Textarea } from "@/components/ui/textarea"

export function TextareaWithHelperText() {
  return (
    <div className="w-full space-y-2">
      <Textarea placeholder="Your message..." />
      <div className="text-foreground flex gap-1.5">
        <Info className="h-3.5 w-3.5 shrink-0 translate-y-[3px] stroke-2" />
        <p className="text-muted-foreground text-xs">
          Use at least 255 characters and a maximum of 1000 characters.
        </p>
      </div>
    </div>
  )
}

Textarea with Validation

Textarea components with validation states (error and success) that provide visual feedback to users about the validity of their input, helping them correct mistakes or confirm successful entries.

Something went wrong!

Congratulations 🎉

import { Textarea } from "@/components/ui/textarea"

export function TextareaWithValidation() {
  return (
    <div className="w-full space-y-6">
      <div className="w-full space-y-1">
        <Textarea
          placeholder="Textarea Error"
          className="border-destructive focus-visible:ring-destructive/20"
          aria-invalid="true"
        />
        <p className="text-destructive text-xs">Something went wrong!</p>
      </div>
      <div className="w-full space-y-1">
        <Textarea
          placeholder="Textarea Success"
          className="border-green-500 focus-visible:ring-green-500/20"
        />
        <p className="text-xs text-green-600 dark:text-green-400">
          Congratulations 🎉
        </p>
      </div>
    </div>
  )
}

Chatbox with Textarea

A chat interface component that combines a textarea with action buttons for media, GIFs, emojis, and sending messages, creating a complete messaging input experience.

import { File, Image as ImageIcon, Send, Smile } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

export function ChatboxWithTextarea() {
  return (
    <form action="#" className="flex w-full items-center gap-4">
      <div className="flex items-center gap-1">
        <Button type="button" variant="ghost" size="icon">
          <ImageIcon className="h-5 w-5" />
        </Button>
        <Button type="button" variant="ghost" size="icon">
          <File className="h-5 w-5" />
        </Button>
        <Button type="button" variant="ghost" size="icon">
          <Smile className="h-5 w-5" />
        </Button>
      </div>
      <Textarea placeholder="Send a new message" rows={1} className="flex-1" />
      <Button type="button" variant="ghost" size="icon">
        <Send className="h-5 w-5" />
      </Button>
    </form>
  )
}

Comment Box with Textarea

A comment form component that includes a textarea for entering comments along with attachment and action buttons (Cancel, Post Comment), providing a complete commenting interface.

import { Paperclip } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

export function CommentBoxWithTextarea() {
  return (
    <form action="#" className="w-full">
      <Textarea placeholder="[email protected]" />
      <div className="flex w-full justify-between py-3">
        <Button type="button" variant="ghost" size="sm">
          <Paperclip className="h-4 w-4" />
        </Button>
        <div className="flex gap-2">
          <Button type="button" variant="secondary" size="sm">
            Cancel
          </Button>
          <Button type="submit" size="sm">
            Post Comment
          </Button>
        </div>
      </div>
    </form>
  )
}

Props

The textarea component is a standard HTML textarea element with enhanced styling and accepts all standard textarea props:

Textarea

PropTypeDefaultDescription
placeholderstring-Placeholder text displayed when the textarea is empty
disabledbooleanfalseWhen true, prevents the user from interacting with the textarea
rowsnumber-The number of visible text lines
colsnumber-The visible width of the textarea in character columns
valuestring-The controlled value of the textarea
defaultValuestring-The default value of the textarea (uncontrolled)
onChangefunction-Event handler called when the value changes
classNamestring-Additional CSS classes to apply to the textarea
aria-invalidboolean-Indicates that the textarea has invalid input for accessibility

Accessibility

The textarea component follows accessibility best practices:

  • Supports keyboard navigation and focus management
  • Works with screen readers through proper ARIA attributes
  • Supports aria-invalid for validation states
  • Properly associates with labels using htmlFor and id attributes
  • Disabled state is properly communicated to assistive technologies

Best Practices

  • Use textareas for multi-line text input (comments, messages, descriptions)
  • Provide clear labels and helper text to guide users
  • Use validation states to provide immediate feedback
  • Consider character limits and display them with helper text
  • Ensure proper spacing and sizing for comfortable text entry
  • Use appropriate placeholder text that provides context
  • Make sure disabled states are clearly visually distinct
  • Test keyboard navigation and screen reader compatibility

The textarea component provides a clean and accessible way to collect longer text input from users. It's ideal for forms, comment sections, messaging interfaces, and any scenario where users need to enter multi-line text content.