Shadcn Textarea for React

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/textarea.json

npx shadcn@latest add https://kit.dev/r/base/textarea.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/textarea.json

yarn shadcn@latest add https://kit.dev/r/base/textarea.json

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

export const Textarea = (props: React.ComponentProps<"textarea">) => {
  const { className, ...rest } = props;

  return (
    <textarea
      className={cn(
        "cn-textarea field-sizing-content flex min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      data-slot="textarea"
      {...rest}
    />
  );
};

Usage

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

const TextareaDemo = () => (
  <Textarea className="max-w-xs" placeholder="Type your message here." />
);

Demos

Field

Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

Disabled

Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

Invalid

Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

Button

Pair with Button to create a textarea with a submit button.

Rtl

Right-to-left textarea. See the RTL configuration guide for document direction.

API Reference