Textarea

A standalone multi-line text input with focus rings, invalid state, and dark mode — built with Tailwind CSS.

Preview

Basic textarea

import { Textarea } from '@/registry/ui-kit/tailwind-textarea/react'

function Example() {
  return <Textarea placeholder="Write your message..." />
}

Custom rows

import { Textarea } from '@/registry/ui-kit/tailwind-textarea/react'

function Example() {
  return <Textarea placeholder="Larger area" rows={6} />
}

Invalid

import { Textarea } from '@/registry/ui-kit/tailwind-textarea/react'

function Example() {
  return <Textarea invalid placeholder="Required field" />
}

Component API

Prop	Default	Description
`invalid`	`false`	Show the textarea in an invalid/error state with red border.
`className`	`""`	Additional CSS classes to apply.

Source Code

"use client";

import { forwardRef } from "react";

interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  invalid?: boolean;
  className?: string;
}

const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ invalid = false, className = "", ...props }, ref) => {
    return (
      <textarea
        ref={ref}
        aria-invalid={invalid || undefined}
        className={[
          "block w-full rounded-lg border bg-white px-3.5 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors placeholder:text-zinc-400 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500 disabled:cursor-not-allowed disabled:opacity-50",
          invalid
            ? "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-500/20"
            : "border-zinc-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:focus:border-indigo-400 dark:focus:ring-indigo-400/20",
          className,
        ].join(" ")}
        {...props}
      />
    );
  }
);
Textarea.displayName = "Textarea";

export { Textarea };
export default Textarea;