Input
Campo de texto con etiqueta, ayuda, iconos y estados de error y éxito.
Usar
import { Input } from "@unozero-ai/ui/react";
<Input></Input>Configurador
Cambia las propiedades y mira el campo y su código al mismo tiempo.
<Input type="email" label="Correo del huésped" placeholder="laura.gomez@correo.com" helperText="Le enviamos aquí la confirmación." />Básico
La etiqueta va siempre encima y helperText debajo, para lo que el usuario necesita saber antes de escribir. El placeholder muestra un ejemplo del dato; no sustituye a la etiqueta, porque desaparece en cuanto se escribe. Emite input y change como un <input>: en React, onInput llega en cada tecla (e.currentTarget.value) y onChange al confirmar.
Con iconos
Los iconos van por slots: slot="start" anticipa el tipo de dato (correo, teléfono) y slot="end" lo confirma o lleva una acción. Las props leftIcon y rightIcon del kit de React ya no existen. El kit pone el SVG a 16 px; márcalo con aria-hidden y deja que la etiqueta diga qué va en el campo.
Estados
Con error el campo pasa a estado de error y el mensaje aparece debajo, enlazado al campo para los lectores de pantalla; cuando el error llega, el campo se sacude una vez. El error nunca va solo en el color del borde: el texto dice qué falta y cómo arreglarlo (la Regla del Tenant). Lo mismo con state="success": el borde lo confirma, el icono y la frase lo dicen. readonly (antes readOnly) deja leer y copiar un dato que no se cambia aquí; disabled lo apaga del todo y no lo envía con el formulario. En los dos, explica en la ayuda quién lo cambia.
Tamaños
sm para filtros en la barra de una tabla, md (por defecto) para formularios del panel y lg para superficies públicas como el portal de reservas o el acceso. La altura sale de los tokens de densidad (--control-h-sm y --control-h), así que el campo y el botón de al lado miden lo mismo en la densidad del panel y en la cómoda.
Formulario de huésped
Un caso real: datos para la tarjeta de registro. uz-input es un control de formulario nativo: con name entra en el FormData, el navegador valida required, type="email" y pattern, y el kit pinta su mensaje bajo cada campo (en el idioma del navegador) y lo quita en cuanto se corrige. onSubmit solo llega con todo válido. El botón type="reset" vacía el formulario. Las props van en minúscula, como en HTML: autocomplete e inputmode. Un solo botón principal (la Regla de una Sola Decisión). Pulsa «Guardar huésped» con el formulario vacío.
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).