Textarea

Displays a form textarea or a component that looks like a textarea.

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

export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." className="max-w-sm" />;
}

Installation

components/ui/textarea.tsx

import { cn } from "@/lib/cn";

function Textarea({
  className,
  size = "default",
  ...props
}: React.ComponentProps<"textarea"> & { size?: "xs" | "sm" | "default" | "lg" | "xl" }) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "field-sizing-content no-scrollbar min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none transition-colors selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:resize-none disabled:opacity-50 max-sm:min-h-20 dark:bg-input/30",
        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
        "aria-invalid:border-danger aria-invalid:ring-danger/30",
        size === "xs" && "min-h-14 rounded-sm px-2 py-1 text-xs focus-visible:ring-2",
        size === "sm" && "min-h-15 rounded-md py-1.5 text-[0.8125rem] focus-visible:ring-2",
        size === "lg" && "min-h-17",
        size === "xl" && "min-h-18 px-3 text-base",
        className
      )}
      {...props}
    />
  );
}

export { Textarea };

Usage

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

<Textarea />

Examples

Sizes

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

export function TextareaDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Textarea size="xs" placeholder="Type your message here." />
      <Textarea size="sm" placeholder="Type your message here." />
      <Textarea size="default" placeholder="Type your message here." />
      <Textarea size="lg" placeholder="Type your message here." />
      <Textarea size="xl" placeholder="Type your message here." />
    </div>
  );
}

Disabled

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

export function TextareaDemo() {
  return <Textarea disabled placeholder="Type your message here." className="max-w-sm" />;
}

Invalid

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

export function TextareaDemo() {
  return <Textarea aria-invalid placeholder="Type your message here." className="max-w-sm" />;
}

Resize

By default, the textarea is resizable vertically. You can customize the resize behavior using CSS resize property.

Resize horizontal:

Resize both:

Resize none:

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

export function TextareaDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5 *:flex *:flex-col *:gap-2">
      <div>
        <label htmlFor="resize-horizontal" className="inline-block font-medium text-sm">
          Resize horizontal:
        </label>
        <Textarea
          id="resize-horizontal"
          placeholder="Type your message here."
          className="max-w-sm resize-x"
        />
      </div>
      <div>
        <label htmlFor="resize-both" className="inline-block font-medium text-sm">
          Resize both:
        </label>
        <Textarea
          id="resize-both"
          placeholder="Type your message here."
          className="max-w-sm resize"
        />
      </div>
      <div>
        <label htmlFor="resize-none" className="inline-block font-medium text-sm">
          Resize none:
        </label>
        <Textarea
          id="resize-none"
          placeholder="Type your message here."
          className="max-w-sm resize-none"
        />
      </div>
    </div>
  );
}

Field

Render FieldControl as Textarea to integrate with Field component. This allows you to use FieldLabel, FieldDescription, and FieldError components seamlessly with the textarea.

Enter your message

Make sure to be respectful and follow our community guidelines.

import { Field, FieldControl, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export function TextareaDemo() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Enter your message</FieldLabel>
      <FieldControl render={<Textarea placeholder="Type your message here." />} />
      <FieldDescription>
        Make sure to be respectful and follow our community guidelines.
      </FieldDescription>
    </Field>
  );
}

API Reference

Textarea props

Prop

Type

Default

size?

"xs" | "sm" | "default" | "lg" | "xl"

"default"

Tabs Tooltip

Textarea

size?"xs" | "sm" | "default" | "lg" | "xl""default"

On this page