Controls

Textarea

A multi-line text input.

Preview

Message

Install

pnpm dlx shadcn@latest add @abnormal/textarea

Brings inutils

Usage

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

export default function TextareaDemo() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="textarea-message">Message</Label>
      <Textarea id="textarea-message" placeholder="Write a message" />
    </div>
  );
}

Source

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

/** Multi-line input: the same border, radius and hover / invalid states as Input, resizable vertically by default. */
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "min-h-24 w-full min-w-0 rounded-control border border-input bg-control px-3 py-2 text-base leading-relaxed text-foreground transition-[border-color] duration-150 placeholder:text-muted-foreground/70 hover:border-[color-mix(in_oklab,var(--input),var(--text)_30%)] focus-visible:border-[color-mix(in_oklab,var(--input),var(--text)_30%)] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className,
      )}
      {...props}
    />
  );
}

export { Textarea };