Textarea

Core Idea

Displays a form textarea, or a component styled to look like one, for multi-line text input.

Key Concepts

• disabled: standard HTML prop to disable the textarea; pair with data-disabled on the wrapping Field to style the disabled state.
• aria-invalid: marks the textarea as invalid for accessibility; pair with data-invalid on Field to style the invalid state.
• Field / FieldLabel / FieldDescription: composable wrapper components (from @/components/ui/field) used to attach a label and description to a plain Textarea.
• RTL: no special prop on Textarea itself, pass dir={dir} through from a translation/direction context; see the RTL configuration guide.

Code Examples

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

export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}

• O que demonstra: uso mínimo, sem wrapper.

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

export function TextareaField() {
  return (
    <Field>
      <FieldLabel htmlFor="textarea-message">Message</FieldLabel>
      <FieldDescription>Enter your message below.</FieldDescription>
      <Textarea id="textarea-message" placeholder="Type your message here." />
    </Field>
  )
}

• O que demonstra: padrão recomendado com label + descrição via Field.

<div className="grid w-full gap-2">
  <Textarea placeholder="Type your message here." />
  <Button>Send message</Button>
</div>

• O que demonstra: composição com Button para formulário de envio rápido.

Anti-patterns

• Estilizar disabled/invalid direto na Textarea: o padrão da lib é colocar data-disabled/data-invalid no Field pai, não em classes condicionais na própria textarea.

Key Takeaways

1. Textarea sozinho é só o input; para forms completos sempre envolver com Field/FieldLabel/FieldDescription.
2. Estado inválido é sinalizado por aria-invalid (a11y) + data-invalid no Field (estilo), não por uma prop error custom.
3. Suporte a RTL é feito propagando dir manualmente, não é automático.

Connects To

• Field (@/components/ui/field): wrapper padrão para label/descrição/estado em qualquer input, incluindo Textarea, Checkbox, Select etc.
• Button: combinação comum para formulários com textarea + ação de envio.