Textarea

Example

Installation

Create a `textarea.tsx` file and paste the following code into it.

/components/ui/textarea.tsx usage

import * as React from "react";

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

interface TextareaProps extends React.ComponentProps<"textarea"> {
  /** The heading text */
  heading?: string;
  /** The description text */
  description?: string;
}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, heading, description, ...props }, ref) => {
    return (
      <div className="flex flex-col gap-1">
        {heading && (
          <span className="text-input-heading text-sm font-medium leading-none my-0">
            {heading}
          </span>
        )}
        {description && (
          <span className="text-input-description text-xs my-0">
            {description}
          </span>
        )}
        <textarea
          ref={ref}
          data-slot="textarea"
          className={cn(
            "border-input placeholder:text-muted-foreground focus-visible:border-brand focus-visible:ring-brand/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
            className,
          )}
          {...props}
        />
      </div>
    );
  },
);
Textarea.displayName = "Textarea";

export { Textarea };

import * as React from "react";import { cn } from "@/lib/utils";interface TextareaProps extends React.ComponentProps<"textarea"> {  /** The heading text */  heading?: string;  /** The description text */  description?: string;}const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(  ({ className, heading, description, ...props }, ref) => {    return (      <div className="flex flex-col gap-1">        {heading && (          <span className="text-input-heading text-sm font-medium leading-none my-0">            {heading}          </span>        )}        {description && (          <span className="text-input-description text-xs my-0">            {description}          </span>        )}        <textarea          ref={ref}          data-slot="textarea"          className={cn(            "border-input placeholder:text-muted-foreground focus-visible:border-brand focus-visible:ring-brand/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",            className,          )}          {...props}        />      </div>    );  },);Textarea.displayName = "Textarea";export { Textarea };

Check the import paths to ensure they match your project setup.

Usage

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

<Textarea placeholder="Type your message here." />

The Textarea accepts all native <textarea> props, including placeholder, disabled, rows, value, and onChange.

Examples

Default

With label

Message

Disabled

With rows

Use the rows prop to control the initial height.

API Reference

Textarea

The Textarea component displays a styled multi-line text input. It forwards all native textarea props and supports focus, invalid, and disabled styles.

headingstring

Default: -

The heading text

disabledboolean

Default: -

descriptionstring

Default: -

The description text

placeholderstring

Default: -

Prop	Type	Default	Description
heading	string	-	The heading text
disabled	boolean	-	-
description	string	-	The description text
placeholder	string	-	-

Textarea

Create a textarea.tsx file and paste the following code into it.

Check the import paths to ensure they match your project setup.

On this page

Create a `textarea.tsx` file and paste the following code into it.