Logo
DocsTextarea

Textarea

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

Implementation

1

Copy and paste the following code into your project.

import * as React from "react"

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

export interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
    return (
      <textarea
        className={cn(
          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Textarea.displayName = "Textarea"

export { Textarea }
2

Update the import paths to match your project setup.

Usage

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

Examples

Default

With Label

With Text

Your message will be copied to the support team.

Disabled

API Reference

Textarea

The textarea component is built on top of the native textarea element.

Properties

PropertyTypeDefaultDescription
disabledbooleanfalseWhen true, prevents the user from interacting with the textarea.
requiredbooleanfalseWhen true, indicates that the user must specify a value for the textarea.
placeholderstring-The placeholder text to show when the textarea is empty.