Textarea

Displays a form textarea or a component that looks like a textarea.

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

export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." className="max-w-md" />
}

Installation


pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/textarea.json

Usage

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

<Textarea />

Examples

With label

Feedback

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

export function TextareaWithLabel() {
  return (
    <div className="flex w-full max-w-md flex-col gap-1.5">
      <Label htmlFor="feedback">Feedback</Label>
      <Textarea id="feedback" placeholder="What could be better?" />
    </div>
  )
}

Invalid

Bio

Write at least 20 characters.

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

export function TextareaInvalid() {
  return (
    <div className="flex w-full max-w-md flex-col gap-1.5">
      <Label htmlFor="bio">Bio</Label>
      <Textarea
        id="bio"
        aria-invalid
        aria-describedby="bio-error"
        defaultValue="Hi"
      />
      <p id="bio-error" className="text-[13px] leading-4 text-destructive">
        Write at least 20 characters.
      </p>
    </div>
  )
}

Disabled

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

export function TextareaDisabled() {
  return <Textarea disabled placeholder="Disabled" className="max-w-md" />
}