Textarea

Texto de várias linhas que cresce suavemente conforme o que você escreve, entre um número mínimo e máximo de linhas, com contadores, validação e um atalho de envio.

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>
  )
}

Instalação

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

Adiciona o componente, os tokens de tema do HextaUI e quaisquer componentes do HextaUI dos quais ele depende.

Adicione os tokens de tema ao seu CSS global, se ainda não o fez.

Instale as dependências.

pnpm add @base-ui/react class-variance-authority cn

Copie e cole o código a seguir no seu projeto.

components/ui/textarea.tsx

"use client"

import * as React from "react"
import { Input as InputPrimitive } from "@base-ui/react/input"
import { cn } from "cn"

import { useAutosize } from "@/hooks/use-autosize"
import { useComposedRef } from "@/hooks/use-composed-ref"

components/ui/input.tsx

"use client"

import * as React from "react"
import { Input as InputPrimitive } from "@base-ui/react/input"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { useAutosize } from "@/hooks/use-autosize"

components/ui/number-flow.tsx

"use client"

import * as React from "react"
import { cn } from "cn"

import { easeSpring } from "@/lib/motion"

type NumberFlowTrend = "auto" | "up" | "down" | "shortest"

lib/motion.ts

import * as React from "react"

const easeOut = "cubic-bezier(0.23, 1, 0.32, 1)"
const easeInOut = "cubic-bezier(0.77, 0, 0.175, 1)"
const easeSpring =
  "linear(0, 0.015 2%, 0.0532 4%, 0.1065 6%, 0.1686 8%, 0.2351 10%, 0.3363 13%, 0.4332 16%, 0.5495 20%, 0.648 24%, 0.7287 28%, 0.807 33%, 0.8646 38%, 0.9128 44%, 0.9447 50%, 0.968 57%, 0.9834 65%, 0.9924 74%, 0.9975 85%, 1)"

const duration = {

Atualize os caminhos de importação para corresponder à configuração do seu projeto.

Uso

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

<Textarea placeholder="Write something…" />

A caixa cresce com o texto, suavizando a cada nova linha em vez de saltar, de minRows até maxRows, e depois rola. A digitação nunca é atrasada pela animação.

Exemplos

Enviar com um atalho

submitOnShortcut envia o formulário com ⌘ + Enter ou Ctrl + Enter. Enter sozinho ainda inicia uma nova linha.

"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>
  )
}

Contagem de caracteres

Com maxLength dentro de um Field, FieldCounter conta enquanto você digita e dá um aviso ao atingir o limite.

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>
  )
}

Linhas

minRows e maxRows definem onde o crescimento começa e para.

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>
  )
}

Tamanho fixo

autoResize={false} mantém uma altura fixa com uma alça de redimensionamento vertical.

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"
    />
  )
}

Estados

Desabilitado, somente leitura e inválido. Textareas inválidos tremem quando o envio de um formulário falha.

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>
  )
}

Da direita para a esquerda

Texto, placeholder e cursor seguem a direção de leitura.

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

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

Teclado

Tecla	Ação
`Enter`	Inicia uma nova linha.
`⌘Enter`	Envia o formulário, com submitOnShortcut. Ctrl + Enter no Windows e no Linux.

Acessibilidade

Rotule com FieldLabel ou aria-label.
Em telas touch o texto tem pelo menos 16px, para o iOS não dar zoom ao receber foco.
O atalho espera enquanto um método de entrada está compondo, então confirmar uma palavra em japonês ou chinês nunca envia a mensagem.
Com movimento reduzido, a caixa se redimensiona instantaneamente.

Referência da API

Textarea

Prop	Tipo	Padrão
`autoResize`Cresce com o texto em vez de ter altura fixa.	`boolean`	`true`
`minRows`	`number`	`3`
`maxRows`	`number`	`10`
`submitOnShortcut`Envia o formulário pai com ⌘/Ctrl + Enter.	`boolean`	`false`
`shake`Treme quando o envio do formulário o considera inválido.	`boolean`	`true`

Atributo	Descrição
`data-slot="textarea"`	O textarea.
`data-autoresize`	Presente quando cresce com o texto.
`--textarea-min-rows / --textarea-max-rows`	Definido a partir de minRows e maxRows.

Usado em blocos

Blocos que se baseiam em Textarea.