0

Textarea

PreviousNext

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

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

export function TextareaDemo() {

Installation

bunx --bun shadcn@latest add @ondo-ui/textarea

Usage

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

Examples

Sizes

xs, sm, default, lg, xl, and 2xl.

Horizontal padding, text size, and corner radius match Input at every step, so a textarea and an input of the same size line up in a form. Only the vertical padding and minimum height differ, since a textarea is multi-line.

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

const sizes = ["xs", "sm", "default", "lg", "xl", "2xl"] as const

Field

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

Enter your message below.

import {
  Field,
  FieldDescription,

Disabled

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

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

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.

Please enter a valid message.

import {
  Field,
  FieldDescription,

Button

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

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

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"
 
import * as React from "react"
 
import {
  useTranslation,
  type Translations,
} from "@/components/language-selector"
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
 
const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      label: "Feedback",
      placeholder: "Your feedback helps us improve...",
      description: "Share your thoughts about our service.",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      label: "التعليقات",
      placeholder: "تعليقاتك تساعدنا على التحسين...",
      description: "شاركنا أفكارك حول خدمتنا.",
    },
  },
  he: {
    dir: "rtl",
    values: {
      label: "משוב",
      placeholder: "המשוב שלך עוזר לנו להשתפר...",
      description: "שתף את מחשבותיך על השירות שלנו.",
    },
  },
}
 
export function TextareaRtl() {
  const { dir, t } = useTranslation(translations, "ar")
 
  return (
    <Field className="w-full max-w-xs" dir={dir}>
      <FieldLabel htmlFor="feedback" dir={dir}>
        {t.label}
      </FieldLabel>
      <Textarea id="feedback" placeholder={t.placeholder} dir={dir} rows={4} />
      <FieldDescription dir={dir}>{t.description}</FieldDescription>
    </Field>
  )
}