Textarea

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

Last updated August 7, 2026

CreditsUnchangedPublished

Overview

import { Textarea } from "@/components/ui/textarea"
 
export function TextareaDemoExample() {
  return <Textarea placeholder="Type your message here." className="max-w-xs" />
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/textarea.json

Usage

import { Textarea } from "@/components/ui/textarea"
 
export function Example() {
  return <Textarea placeholder="Type your message here." />
}

Field

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

Bio

This will be shown on your profile.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
 
export function TextareaFieldExample() {
  return (
    <Field className="max-w-xs">
      <FieldLabel htmlFor="textarea-field-bio">Bio</FieldLabel>
      <Textarea id="textarea-field-bio" placeholder="Tell us about yourself" />
      <FieldDescription>This will be shown on your profile.</FieldDescription>
    </Field>
  )
}

Disabled

Use the disabled prop to disable the textarea. Add data-disabled to Field to style the disabled label too.

Bio

import { Field, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
 
export function TextareaDisabledExample() {
  return (
    <Field data-disabled className="max-w-xs">
      <FieldLabel htmlFor="textarea-disabled">Bio</FieldLabel>
      <Textarea id="textarea-disabled" placeholder="Tell us about yourself" disabled />
    </Field>
  )
}

Invalid

Use aria-invalid to mark the textarea as invalid, and data-invalid on Field to style the invalid label.

Bio

Bio must be at least 10 characters.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
 
export function TextareaInvalidExample() {
  return (
    <Field data-invalid className="max-w-xs">
      <FieldLabel htmlFor="textarea-invalid">Bio</FieldLabel>
      <Textarea id="textarea-invalid" aria-invalid defaultValue="x" />
      <FieldDescription>Bio must be at least 10 characters.</FieldDescription>
    </Field>
  )
}

Button

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

import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
 
export function TextareaButtonExample() {
  return (
    <Field className="max-w-xs gap-3">
      <Textarea placeholder="Type your message here." />
      <Button className="self-end">Send message</Button>
    </Field>
  )
}

RTL

بیوگرافی

این متن در نمایه شما نشان داده می‌شود.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
 
export function TextareaRtlExample() {
  return (
    <Field className="max-w-xs">
      <FieldLabel htmlFor="textarea-rtl">بیوگرافی</FieldLabel>
      <Textarea id="textarea-rtl" placeholder="کمی درباره خودتان بنویسید" />
      <FieldDescription>این متن در نمایه شما نشان داده می‌شود.</FieldDescription>
    </Field>
  )
}

API Reference

Textarea

Prop	Type	Default	Description
disabled	boolean	false	Prevents interaction and dims the textarea.
rows	number	undefined	The number of visible text lines.

Edit this page on GitHub

PreviousTabs