Textarea
Texto largo con la misma anatomía que Input.
Usar
import { Textarea } from "@unozero-ai/ui/react";
<Textarea></Textarea>Configurador
Cambia las propiedades y mira el campo y su código al mismo tiempo.
<Textarea label="Notas de la reserva" placeholder="Llega tarde, hacia las 11 p. m." helperText="Solo las ve tu equipo." />Básico
Para texto de más de una línea: notas, mensajes, motivos. Si el dato cabe en una línea (un nombre, un código), usa Input. La altura la fija rows (3 por defecto) y el kit quita el tirador de redimensionar, así que elige un rows que se parezca a lo que se suele escribir. Lleva la misma etiqueta, ayuda y error que Input.
Con límite de caracteres
Cuando el destino tiene un límite (las plantillas de WhatsApp aceptan 1024 caracteres), ponlo en maxlength: el kit pinta el contador n/máx bajo el campo, en cifras tabulares, y lo pasa a color de aviso al llegar al 90 %. El lector de pantalla lo lee como descripción del campo. Ya no hace falta contar a mano en helperText, que queda para explicar el dato.
Crece con el texto
Con autoresize, rows pasa a ser la altura mínima y el campo crece con lo escrito, hasta 20 líneas. Úsalo en respuestas de longitud variable, como un mensaje al huésped. Donde el navegador no soporta field-sizing, se queda en rows y hace scroll.
Error, solo lectura y deshabilitado
Igual que en Input: el mensaje de error va debajo y dice qué hacer, nunca solo el borde rojo (la Regla del Tenant). readonly muestra un texto que viene de otro sistema y deja copiarlo; la ayuda dice dónde se cambia. disabled es para lo que no aplica en este caso, y no se envía con el formulario.
Respuesta a una reseña
Un caso real: la reseña arriba, la respuesta debajo y una sola acción principal (la Regla de una Sola Decisión). El campo es un control de formulario nativo: required y minlength los valida el navegador, el kit pinta el mensaje al enviar y lo quita al corregirlo, y el valor se lee del FormData con su name. «Descartar» es un type="reset" en ghost: vacía el campo sin ser la decisión que toca. Prueba a publicar una respuesta corta.
En React, escucha onChange (llega al perder el foco). onInput en el envoltorio todavía no funciona: choca con un método interno del kit. Si necesitas cada tecla, escucha onInput en el <form> que lo contiene, que recibe el evento igual.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).