Textarea Área de Texto
Introduction
Un control de entrada de texto libre multilínea para capturar entradas de usuario más largas, como comentarios, descripciones, feedback o envíos de formularios extensos. Funciona como un layout totalmente accesible en la arquitectura cliente de renderizado sin JS.
El componente Textarea está totalmente integrado como bloque textarea en el Page Builder, permitiendo a los autores configurar fácilmente marcadores de posición, sugerencias de ayuda, reglas de validación, escala de tamaño y comportamiento de autoajuste.
Usage
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran áreas de texto.
1. Área de texto estándar con sugerencia de ayuda
Una entrada multilínea predeterminada con etiqueta y texto de ayuda 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 con contador de caracteres y longitud máxima
Un área de tamaño medio con límite de caracteres y autoajuste de altura habilitado, mostrando el contador en vivo.
{
"type": "textarea",
"label": "Status Update",
"placeholder": "What's happening?",
"maxLength": 200,
"showCount": true,
"autoresize": true,
"size": "sm",
"interactive": true
}
3. Área de texto con estado de error inválido
Demuestra el estado visual de error, activa los bordes de invalidación y precarga un mensaje de error para mostrar en el cliente.
{
"type": "textarea",
"label": "Account Bio",
"placeholder": "Tell us about yourself",
"invalid": true,
"errorText": "Bio cannot contain profanity.",
"interactive": true
}
Props
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / opciones admitidas |
|---|---|---|---|
Texto de etiqueta (label) | string | - | Título descriptivo sobre el área de texto. |
Texto de marcador (placeholder) | string | - | Texto fantasma dentro del campo vacío. |
Sugerencia de ayuda (helperText) | string | - | Nota contextual ligera debajo del campo. |
Autoajuste (autoresize) | boolean | false | Se adapta a la altura del contenido, eliminando barras de desplazamiento estáticas. |
Longitud máxima (maxLength) | number | - | Límite superior de caracteres ingresables. |
Mostrar contador (showCount) | boolean | false | Renderiza un contador en vivo (p. ej. 12/200). |
Variante visual (variant) | select | "outline" | Tema de borde y relleno. • Opciones: "outline", "surface", "subtle", "flushed". |
Escala de tamaño (size) | select | "md" | Controla relleno y tamaño de fuente. • Opciones: "xs", "sm", "md", "lg", "xl". |
Ancho (width) | select | "full" | Comportamiento de ancho de bloque. • Opciones: "full", "fit". |
Estado inválido (invalid) | boolean | false | Activa bordes de error y estado inválido. |
Deshabilitado (disabled) | boolean | false | Desactiva la interacción y aplica capa atenuada. |
Forzar interactivo (interactive) | boolean | true | Hidrata el área para enlazar eventos de cliente. |
Developer Notes & Accessibility
- Integración de formularios nativa: Compila como
<textarea>nativo con atributosnameyform, garantizando usabilidad nativa sin JS. - Cumplimiento WAI-ARIA: Las relaciones etiqueta/error se vinculan mediante
label,aria-invalidyaria-describedby, asegurando que los lectores de pantalla anuncien errores de validación. - Autoajuste inteligente:
autoresizeajusta dinámicamente la altura de desplazamiento al pulsar teclas, sin reflows costosos.