Textarea

A multi-line text input component with configurable resize behavior. Perfect for comments, descriptions, and long-form content.

Installation

Terminal

ReactTailwind

TSX

npx @uiblox/cli add textarea

Visual Variations

Toggle between three different visual styles: default (bordered), filled (background), and underline (minimal).

Basic Textarea

Standard text area

With Character Count

0/200

Limited characters

Disabled

Non-editable state

Basic Usage

Copy & paste ready

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

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

Resize Options

No resize

Vertical (default)

Horizontal

Both

ReactTailwind CSSCopy & paste ready

<Textarea resize="none" placeholder="No resize" />
<Textarea resize="vertical" placeholder="Vertical resize (default)" />
<Textarea resize="horizontal" placeholder="Horizontal resize" />
<Textarea resize="both" placeholder="Both directions" />

Disabled State

ReactTailwind CSSCopy & paste ready

<Textarea
  disabled
  placeholder="This textarea is disabled"
  defaultValue="Cannot edit this content"
/>

With Label

Bio

Maximum 500 characters

ReactTailwind CSSCopy & paste ready

<div className="space-y-2">
  <label htmlFor="bio" className="text-sm font-medium">
    Bio
  </label>
  <Textarea
    id="bio"
    placeholder="Tell us about yourself..."
    rows={4}
  />
  <p className="text-sm text-gray-500">
    Maximum 500 characters
  </p>
</div>

Form Example

Subject

Message

ReactTailwind CSSCopy & paste ready

<form className="space-y-4 p-4 border rounded-lg">
  <div className="space-y-2">
    <label className="text-sm font-medium">Subject</label>
    <input
      type="text"
      placeholder="Enter subject"
      className="flex h-10 w-full rounded-md border px-3 py-2 text-sm"
    />
  </div>
  <div className="space-y-2">
    <label className="text-sm font-medium">Message</label>
    <Textarea placeholder="Type your message..." rows={5} />
  </div>
  <button className="px-4 py-2 bg-primary-600 text-white rounded-md">
    Send Message
  </button>
</form>

Props

Prop	Type	Default	Description
resize	"none" \| "vertical" \| "horizontal" \| "both"	"vertical"	Controls the resize behavior of the textarea
placeholder	string	-	Placeholder text
disabled	boolean	false	Whether the textarea is disabled
rows	number	-	Number of visible text lines

Source Code

Copy this code into src/components/ui/textarea.tsx:

textarea.tsx

ReactTailwind

TSX

import * as React from "react";
import { cn } from "@/lib/utils";

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  resize?: "none" | "vertical" | "horizontal" | "both";
}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, resize = "vertical", ...props }, ref) => {
    const resizeClasses = {
      none: "resize-none",
      vertical: "resize-y",
      horizontal: "resize-x",
      both: "resize",
    };

    return (
      <textarea
        className={cn(
          "flex min-h-[80px] w-full rounded-md border border-gray-300 dark:border-gray-700",
          "bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100",
          "placeholder:text-gray-500 dark:placeholder:text-gray-400",
          "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
          "disabled:cursor-not-allowed disabled:opacity-50",
          resizeClasses[resize],
          className
        )}
        ref={ref}
        {...props}
      />
    );
  }
);
Textarea.displayName = "Textarea";

export { Textarea };