Textarea

Collects longer, multi-line text with vertical resizing.

Preview

Example code

Project note

Playground

Sizesize

Sets the minimum height and padding.

Schemescheme

Applies a semantic border and surface tint.

Invalidaria-invalid

Marks the field invalid for assistive technology and styling.

Disableddisabled

Prevents editing and resizing.

Usage

tsx

import { Label } from "earthling-ui/label";
import { TextArea } from "earthling-ui/textarea";

export function Example() {
  return (
    <>
      <Label htmlFor="message">Message</Label>
      <TextArea id="message" rows={4} placeholder="Share context…" />
    </>
  );
}

Use a visible label that states what kind of response is expected.
Set rows for a useful initial height; the field grows and can resize vertically.
Use aria-invalid and a nearby message for validation errors.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

Import package

Own the source

bash

npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx

// Generated by dts-bundle-generator v9.5.1

import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';

declare const textAreaVariants: (props?: ({
	size?: "sm" | "md" | "lg" | null | undefined;
	scheme?: "default" | "primary" | "secondary" | "tertiary" | "neutral" | "muted" | "good" | "caution" | "bad" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface TextAreaProps extends Omit<ComponentProps<"textarea">, "size">, VariantProps<typeof textAreaVariants> {
}
export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

export {};

Runtime dependencies: class-variance-authority, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Textarea implementation

tsx

"use client";

import { cn } from "@/utils/cn";
import { schemes } from "@/utils/variants";
import { cva, type VariantProps } from "class-variance-authority";
import { type ComponentProps, forwardRef } from "react";

const textAreaVariants = cva(
  "field-sizing-content resize-y rounded-md border border-(--scheme-tint)/30 text-base font-medium ring-offset-background placeholder:text-current/50 hover:border-(--scheme-tint)/50 hover:bg-(--scheme-tint)/5 focus-visible:ring-2 focus-visible:ring-outline focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:resize-none disabled:opacity-50 aria-invalid:border-bad aria-invalid:ring-bad/30 sm:text-sm",
  {
    variants: {
      size: {
        sm: "min-h-9 px-3 py-[calc((36px-1.5rem)/2)]",
        md: "min-h-10 px-4 py-[calc((40px-1.5rem)/2)]",
        lg: "min-h-11 px-8 py-[calc((44px-1.5rem)/2)]",
      },
      scheme: schemes,
    },
    defaultVariants: { size: "md", scheme: "default" },
  },
);

export interface TextAreaProps
  extends
    Omit<ComponentProps<"textarea">, "size">,
    VariantProps<typeof textAreaVariants> {}

const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
  ({ className, size, scheme, ...props }, ref) => {
    return (
      <textarea
        className={cn(textAreaVariants({ size, scheme }), className)}
        ref={ref}
        data-scheme={scheme}
        {...props}
      />
    );
  },
);
TextArea.displayName = "TextArea";

export { TextArea };