3Get started
HextaUI

Textarea

Multi-line text that grows smoothly with what you write between a minimum and maximum number of rows, with counters, validation and a submit shortcut.

Grows with your text, then scrolls.

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

export function TextareaDemo() {
  return (
    <Field className="w-full max-w-sm">
      <FieldLabel>Feedback</FieldLabel>
      <Textarea placeholder="What could we do better? Keep typing — the box grows with you." />
      <FieldDescription>Grows with your text, then scrolls.</FieldDescription>
    </Field>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/textarea.json

Adds the component, the HextaUI theme tokens and any HextaUI components it depends on.

Usage

import { Textarea } from "@/components/ui/textarea"
<Textarea placeholder="Write something…" />

The box grows with your text, easing to each new line instead of jumping, from minRows up to maxRows, then scrolls. Typing is never delayed by the animation.

Examples

Send with a shortcut

submitOnShortcut submits the form with ⌘ + Enter or Ctrl + Enter. Enter on its own still starts a new line.

Command Enterto send
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Kbd, KbdGroup } from "@/components/ui/kbd"
import { Textarea } from "@/components/ui/textarea"

export function TextareaSubmit() {
  const [comments, setComments] = React.useState<string[]>([])

  return (
    <form
      className="flex w-full max-w-sm flex-col gap-3"
      onSubmit={(event) => {
        event.preventDefault()
        const form = event.currentTarget
        const text = String(new FormData(form).get("comment") ?? "").trim()
        if (text) {
          setComments((list) => [...list, text])
          form.reset()
        }
      }}
    >
      {comments.length > 0 ? (
        <ul className="flex flex-col gap-1 text-sm">
          {comments.map((comment, index) => (
            <li
              key={index}
              className="rounded-md bg-muted px-3 py-2 whitespace-pre-wrap"
            >
              {comment}
            </li>
          ))}
        </ul>
      ) : null}
      <Textarea
        name="comment"
        aria-label="Comment"
        placeholder="Write a comment…"
        minRows={2}
        submitOnShortcut
      />
      <div className="flex items-center justify-between gap-3">
        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
          <KbdGroup>
            <Kbd keys="Mod+Enter" />
          </KbdGroup>
          to send
        </span>
        <Button type="submit" size="sm">
          Comment
        </Button>
      </div>
    </form>
  )
}

Character count

With maxLength inside a Field, FieldCounter counts as you type and nudges when you hit the limit.

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

export function TextareaCounter() {
  return (
    <Field className="w-full max-w-sm">
      <div className="flex items-baseline justify-between gap-3">
        <FieldLabel>Bio</FieldLabel>
        <FieldCounter />
      </div>
      <Textarea name="bio" maxLength={160} minRows={2} />
    </Field>
  )
}

Rows

minRows and maxRows set where growing starts and stops.

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

export function TextareaRows() {
  return (
    <div className="grid w-full max-w-md gap-4 sm:grid-cols-2">
      <Textarea
        aria-label="One to four rows"
        minRows={1}
        maxRows={4}
        placeholder="1–4 rows"
      />
      <Textarea
        aria-label="Five to fifteen rows"
        minRows={5}
        maxRows={15}
        placeholder="5–15 rows"
      />
    </div>
  )
}

Fixed size

autoResize={false} keeps a fixed height with a vertical resize handle.

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

export function TextareaFixed() {
  return (
    <Textarea
      aria-label="Notes"
      autoResize={false}
      minRows={4}
      placeholder="Fixed height. Drag the corner to resize."
      className="max-w-sm"
    />
  )
}

States

Disabled, read-only and invalid. Invalid textareas shake when a form submit fails.

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

export function TextareaStates() {
  return (
    <div className="grid w-full max-w-md gap-4 sm:grid-cols-3">
      <Textarea
        aria-label="Disabled"
        disabled
        placeholder="Disabled"
        minRows={2}
      />
      <Textarea
        aria-label="Read-only"
        readOnly
        defaultValue="Read-only text you can select but not change."
        minRows={2}
      />
      <Textarea
        aria-label="Invalid"
        aria-invalid
        placeholder="Invalid"
        minRows={2}
      />
    </div>
  )
}

Right to left

Text, placeholder and caret follow the reading direction.

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

export function TextareaRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <Textarea aria-label="رسالتك" placeholder="اكتب رسالتك هنا…" />
    </div>
  )
}

Keyboard

KeyAction
EnterStarts a new line.
⌘EnterSubmits the form, with submitOnShortcut. Ctrl + Enter on Windows and Linux.

Accessibility

  • Label it with FieldLabel or aria-label.
  • On touch screens the text is at least 16px, so iOS doesn't zoom in when it's focused.
  • The shortcut waits while an input method is composing, so confirming a Japanese or Chinese word never sends the message.
  • With reduced motion, the box resizes instantly.

API reference

Textarea

PropTypeDefault
autoResizeGrow with the text instead of a fixed height.
booleantrue
minRows
number3
maxRows
number10
submitOnShortcutSubmit the parent form with ⌘/Ctrl + Enter.
booleanfalse
shakeShake when a form submit finds it invalid.
booleantrue
AttributeDescription
data-slot="textarea"The textarea.
data-autoresizePresent when it grows with its text.
--textarea-min-rows / --textarea-max-rowsSet from minRows and maxRows.