OtpInput
Código de verificación por casillas, con pegado y su cuenta atrás.
Usar
import {
OtpInput,
CountdownTimer,
} from "@unozero-ai/ui/react";
<OtpInput></OtpInput>Configurador
Cambia las propiedades y escribe un código. Con otra length las casillas se rehacen y conservan los dígitos que quepan.
<OtpInput label="Código de verificación" />Verificar un código
El flujo completo: el foco salta solo entre casillas, se puede pegar el código entero en cualquiera y el autocompletado del SMS (one-time-code) lo reparte. Retroceso borra y vuelve atrás, las flechas e Inicio/Fin recorren. onComplete lo envía en cuanto está el último dígito, sin botón «Verificar», con el código en detail.value (en el kit 0.1 era el argumento). Mientras se comprueba, el campo queda deshabilitado; si falla, error marca las casillas, el mensaje dice qué pasó y las casillas se vacían con el foco en la primera: con todas llenas, cada dígito que se reescribe vuelve a completar el código y lo envía. Escribe 482913, o cualquier otro para ver el error.
label nombra el grupo: sin él, un lector de pantalla solo oye «Dígito 1», «Dígito 2»… CountdownTimer ya no necesita useHydrated(): pinta su cuenta en el navegador, así que el servidor no manda un segundo distinto. Al reenviar basta con un expiresAt nuevo: la cuenta se reinicia sola, sin cambiar la key.
Error
error solo pinta las casillas y las sacude una vez, corto (informa, no castiga). El mensaje va debajo y con palabras, como en cualquier campo: un borde rojo no dice si el código caducó, no coincide o se agotaron los intentos. Cambia un dígito y el error se va.
PIN en un formulario
length fija el número de casillas: 6 para códigos por WhatsApp o correo, 4 para un PIN personal que confirma una acción delicada. Es un control de formulario nativo: con name envía los dígitos y con required no es válido hasta tenerlos todos. En lugar de deshabilitar el botón hasta completar el PIN, el formulario lo pide con palabras debajo de las casillas. La acción destructiva es la única decisión de la tarjeta (la Regla de una Sola Decisión).
CountdownTimer suelto
La cuenta atrás sirve para cualquier plazo corto que el huésped o el equipo tengan que ver correr, como la retención de una prereserva. expiresAt acepta un Date, milisegundos o texto ISO; label y expiredLabel cambian los textos y onExpire avisa una vez al llegar a cero. Los segundos no se anuncian uno a uno; el final, sí. El plazo de verdad lo lleva el servidor: el contador solo lo muestra. Por encima de una hora, escribe la fecha y la hora en lugar de una cuenta atrás.
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).