Textarea Área de Texto
Introduction
Um controle de entrada de texto livre multilinha para capturar entradas de usuário mais longas, como comentários, descrições, feedback ou envios de formulário extensos. Funciona como um layout totalmente acessível na arquitetura de renderização sem JS no cliente.
O componente Textarea está totalmente integrado como bloco textarea no Page Builder, permitindo que os autores configurem facilmente espaços reservados, dicas de ajuda, regras de validação, escala de tamanho e comportamento de autoajuste.
Usage
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam áreas de texto.
1. Área de texto padrão com dica de ajuda
Uma entrada multilínea padrão com rótulo e texto de ajuda explicativo. Ideal para campos de feedback simples.
{
"type": "textarea",
"label": "Public Comment",
"placeholder": "Share your thoughts...",
"helperText": "Comments are visible to all workspace members.",
"interactive": true
}
2. Área compacta com contador de caracteres e tamanho máximo
Uma área de tamanho médio com limite de caracteres e autoajuste de altura ativado, exibindo o contador em tempo real.
{
"type": "textarea",
"label": "Status Update",
"placeholder": "What's happening?",
"maxLength": 200,
"showCount": true,
"autoresize": true,
"size": "sm",
"interactive": true
}
3. Área de texto com estado de erro inválido
Demonstra o estado visual de erro, ativa as bordas de invalidação e pré-carrega uma mensagem de erro para exibição no cliente.
{
"type": "textarea",
"label": "Account Bio",
"placeholder": "Tell us about yourself",
"invalid": true,
"errorText": "Bio cannot contain profanity.",
"interactive": true
}
Props
| Propriedade | Tipo de campo CMS | Padrão | Descrição / opções suportadas |
|---|---|---|---|
Texto do rótulo (label) | string | - | Título descritivo acima da área. |
Texto de espaço reservado (placeholder) | string | - | Texto fantasma dentro do campo vazio. |
Dica de ajuda (helperText) | string | - | Nota contextual leve abaixo do campo. |
Autoajuste (autoresize) | boolean | false | Adapta-se à altura do conteúdo, eliminando barras de rolagem estáticas. |
Tamanho máximo (maxLength) | number | - | Limite superior de caracteres inseríveis. |
Mostrar contador (showCount) | boolean | false | Renderiza um contador em tempo real (ex. 12/200). |
Variante visual (variant) | select | "outline" | Tema de borda e preenchimento. • Opções: "outline", "surface", "subtle", "flushed". |
Escala de tamanho (size) | select | "md" | Controla preenchimento e tamanho de fonte. • Opções: "xs", "sm", "md", "lg", "xl". |
Largura (width) | select | "full" | Comportamento de largura de bloco. • Opções: "full", "fit". |
Estado inválido (invalid) | boolean | false | Ativa bordas de erro e estado inválido. |
Desabilitado (disabled) | boolean | false | Desativa a interação e aplica camada atenuada. |
Forçar interativo (interactive) | boolean | true | Hidrata a área para vincular eventos do cliente. |
Developer Notes & Accessibility
- Integração de formulário nativa: Compila como
<textarea>nativo comnameeform, garantindo usabilidade nativa sem JS. - Conformidade WAI-ARIA: As relações rótulo/erro são vinculadas via
label,aria-invalidearia-describedby, assegurando que leitores de tela anunciem erros de validação. - Autoajuste inteligente:
autoresizeajusta dinamicamente a altura de rolagem ao digitar, sem reflows custosos.