Área de texto

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

export function TextareaDemo() {

O textarea é um campo de texto de múltiplas linhas. É um elemento <textarea> nativo estilizado — sem biblioteca intermediária em nenhum dos backends — que cresce automaticamente com o conteúdo via CSS field-sizing: content, vestido com a receita neobrutalista: bordas grossas, sombras duras e tipografia em negrito.

Quando usar:

• Comentários e respostas — respostas em texto livre em posts, avaliações e tickets.
• Bios e descrições — bios de perfil, descrições de produto, textos curtos de formulários de configurações.
• Formulários de feedback e de suporte — relatos de bug e mensagens de contato, qualquer coisa maior que uma linha.

Instalação#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
npx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/textarea.json
Copiar

import * as React from "react"

import { cn } from "@/lib/utils"

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }

Uso#

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

Copiar<Textarea />

Exemplos#

Field#

Use Field, FieldLabel e FieldDescription para criar uma área de texto com um rótulo e uma descrição.

import {
  Field,
  FieldDescription,

Desabilitado#

Use a prop disabled para desabilitar a área de texto. Para estilizar o estado desabilitado, adicione o atributo data-disabled ao componente Field.

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

Inválido#

Use a prop aria-invalid para marcar a área de texto como inválida. Para estilizar o estado inválido, adicione o atributo data-invalid ao componente Field.

import {
  Field,
  FieldDescription,

Button#

Combine com Button para criar uma área de texto com um botão de envio.

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

RTL#

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade#

Como controle de formulário nativo, o textarea ganha acesso por teclado de graça — Tab o foca, Enter insere uma nova linha em vez de enviar o formulário — então nenhum padrão ARIA se aplica. Sempre o acompanhe de um rótulo visível: FieldLabel cuida da ligação via htmlFor, como mostra o exemplo com Field. Para validação, defina aria-invalid no textarea e referencie a mensagem de erro com aria-describedby para que leitores de tela anunciem ambos.