kagadmodyaa

Textarea

InputLabel

A multi-line text input for longer form answers.

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

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

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/textarea.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Textarea imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

<Textarea placeholder="Type your message here." />

Examples

With label & disabled

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

export default function TextareaDisabled() {
  return (
    <div className="grid w-full max-w-sm gap-1.5">
      <Label htmlFor="textarea-disabled">Message</Label>
      <Textarea id="textarea-disabled" placeholder="Can't type here" disabled />
    </div>
  )
}

API Reference

NameTypeDefaultDescription
...propsReact.TextareaHTMLAttributes<HTMLTextAreaElement>—Every native textarea attribute (rows, disabled, value, onChange, etc.).