Textarea React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import Textarea from @/components/ui/textarea.

import { useState } from "react"
import { Paperclip, SendHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

export function ListingDescription() {
  return (
    <form action="/listings" method="post">
      <Textarea
        name="description"
        label="Listing description"
        description="At least 40 characters."
        placeholder="Describe the item: condition, size, why you are selling."
        required
        minLength={40}
        showCount
        maxLength={9000}
        fieldProps={{ counterLabel: (left) => `${left} characters left` }}
      />
    </form>
  )
}

export function Composer({ onSend }: { onSend: (text: string) => void }) {
  const [text, setText] = useState("")
  const send = () => {
    if (!text.trim()) return
    onSend(text.trim())
    setText("")
  }
  return (
    <Textarea
      aria-label="Message"
      placeholder="Write a message…"
      value={text}
      onValueChange={setText}
      minRows={1}
      maxRows={6}
      onSubmitShortcut={send}
      footer={
        <>
          <Button variant="ghost" size="icon-sm" radius="full" aria-label="Attach">
            <Paperclip />
          </Button>
          <Button size="sm" radius="full" className="ms-auto" rightIcon={<SendHorizontal />} onClick={send}>
            Send
          </Button>
        </>
      }
    />
  )
}

Props

• labeldefault ""
  ReactNode

  The label, linked with htmlFor. Leave it empty for a bare box, e.g. inside a <Field> that has its own label.

• descriptiondefault ""
  ReactNode

  Helper text under the box, linked with aria-describedby. The error takes its place while it shows.

• errordefault ""
  ReactNode

  Replaces the description with an alert icon and the text, slides in and marks the box invalid (red ring, aria-invalid).

• requireddefault false
  boolean

  The required mark after the label and required on the textarea.

• invaliddefault false
  boolean

  The invalid look and aria-invalid without a message, for forms that show errors elsewhere.

• disableddefault false
  boolean

  Dims the box and its label and blocks typing. Not submitted with the form, like any disabled field.

• readOnlydefault false
  boolean

  The text stays visible, selectable and scrollable but cannot change; no hover tint and no resize grip. Good for terms or a sent message.

• placeholderdefault ""
  string

  Shown while the box is empty, in the muted text color.

• defaultValuedefault ""
  string

  The starting text while uncontrolled. Where the browser has CSS field-sizing the box fits it from the first paint, before any JavaScript runs.

• value
  string

  The text, to control it from outside; pair it with onValueChange. A controlled value past maxLength shows as given (the counter turns red) and is never cut silently.

• onValueChange
  (value: string) => void

  Called with the new text on every change, controlled or not.

• onChange
  (event: ChangeEvent<HTMLTextAreaElement>) => void

  The native change event, untouched, so {...register("description")} from react-hook-form works as on a plain textarea.

• sizedefault "md"
  "sm" | "md" | "lg"

  Text 13 / 14 / 15px (16px on phones, so iOS never zooms) with matching padding. One row is as tall as an input of the same size: 32 / 40 / 48px, 44px for md on touch; sm grows to 36px on phones, where its text is 16px.

• variantdefault "soft"
  "soft" | "outline" | "underline" | "ghost"

  soft is a filled well that works on every surface, outline a bordered box, underline a bottom line that grows a bar from the center on focus, ghost is invisible until hovered (inline edits, toolbars).

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape, scaled per size like the button's (md is 8 / 10 / 12px). full is half a one-row height (16 / 20 / 24px; 18px for sm on phones, 22px for md on touch), so a one-row composer is a pill and a taller box never turns into an oval. Ignored by underline.

• minRowsdefault 3
  number

  The height when empty, in rows of text. 1 makes a composer that starts as tall as an input.

• maxRowsdefault 8
  number

  Grows up to this many rows, then scrolls inside. 0 means no limit; a value below minRows counts as minRows.

• autosizedefault true
  boolean

  Grow with the text. Uses CSS field-sizing where the browser has it and measures once per change elsewhere. false keeps the box at minRows and scrolls.

• resizabledefault false
  boolean

  A vertical resize grip for mouse and trackpad (hidden on touch). With autosize the dragged height becomes the new floor and the box still grows past it when the text needs more.

• showCountdefault false
  boolean

  The "count / max" counter at the end of the message row, amber from 90% and red at the limit. Needs maxLength.

• maxLengthdefault 0
  number

  The native character limit; 0 means none. Screen readers hear how many characters are left once 10% or less remains.

• submitShortcutdefault "mod+enter"
  string

  The combo that submits, in mod+k notation: ⌘ Enter on Apple devices, Ctrl Enter elsewhere. It calls onSubmitShortcut, else form.requestSubmit(). "enter" makes it chat style (Shift Enter for a new line; touch keyboards keep making new lines), "" turns it off. Announced with aria-keyshortcuts; shown nowhere by default (the demo shows a Kbd hint).

• onSubmitShortcut
  (value: string, event: KeyboardEvent<HTMLTextAreaElement>) => void

  Runs on the shortcut with the current text instead of submitting the form. The chat example sends the message with it.

• header
  ReactNode

  A row inside the box above the text: attachment chips, a quoted reply. A click on its empty space lands in the text.

• footer
  ReactNode

  A toolbar inside the box under the text: attach, emoji, send. Buttons keep their own 44px hit areas on touch; a click on the empty space lands in the text.

• id
  string

  The textarea's id. Defaults to useId(); inside a <Field> the Field's id wins. ref and every other native prop (name, autoComplete, spellCheck, autoFocus, onBlur, aria-*, data-*) land on the <textarea> too; inputMode defaults to text and enterKeyHint to enter.

• fieldProps
  Partial<FieldProps>

  Anything else for the Field wrapper: optional, labelAction, orientation, labelWidth, hideLabel, counterLabel (what screen readers hear near the limit).

• classNames
  Partial<Record<"field" | "label" | "description" | "error" | "counter" | "box" | "textarea" | "header" | "footer", string>>

  Extra classes for the inner parts.

• className
  string

  Classes for the outermost element: the Field root when there is a label, description, error or counter, else the box.

FAQ

Used in

More React input components