Textarea - Ink UI

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

export function TextareaExample() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Textarea placeholder="Type something..." />
    </div>
  );
}

Examples

Variants

Available variants: default, outline.

Outline

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

export function OutlineTextareaExample() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Textarea variant="outline" placeholder="Outline variant..." />
    </div>
  );
}

Width

By default, the textarea stretches to fill its container (block={true}). Pass block={false} to constrain the width.

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

export function InlineTextareaExample() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Textarea block={false} placeholder="Inline width..." />
    </div>
  );
}

Installation

Copy the source code below into your project:

import { cn } from "@registry/lib/utils";
import { cva } from "class-variance-authority";
import type { VariantProps } from "class-variance-authority";

const textareaVariants = cva(
  "resize-none rounded-lg border border-transparent px-3.5 py-2.5 text-base text-foreground transition-all duration-150 not-disabled:hover:border-accent focus-visible:border-accent focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
  {
    defaultVariants: {
      variant: "default",
    },
    variants: {
      variant: {
        default: "border-input bg-gray-950/5 dark:bg-gray-950/30",
        outline: "border-input",
      },
    },
  },
);

interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
  block?: boolean;
}

export function Textarea({ variant, className, block = true, ...props }: TextareaProps) {
  return (
    <textarea
      className={cn(textareaVariants({ className, variant }), block ? "w-full" : "max-w-60")}
      {...props}
    />
  );
}

API Reference

The Textarea component extends the Base UI Textarea props and adds the following:

Prop	Type	Default	Description
variant	"default" \| "outline"	"default"	Visual style of the textarea.
block	boolean	true	When true, the textarea stretches to fill its container.