Vibeset

Código en casillas

Es la pantalla donde más gente se pierde, y los seis input fallan justo en lo que importa: pegar el código entero, el autocompletado del móvil, el borrado y los lectores de pantalla. La solución es la contraria a lo que parece: hay un solo input real, transparente y encima de todo, y las casillas son dibujo que lee su valor, así que no se pueden desincronizar. Recibe el autocompletado del sistema (one-time-code) y para un lector es un campo de texto y nada más. No lleva maxLength: si pegas «123 456», con límite de 6 el navegador corta antes de limpiar y se pierde un dígito. onCompleto puede ser asíncrona: al llenarse espera, y si el código no vale se sacude, se vacía y devuelve el foco.

Y el original de React Bits: Code Slots

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Code Slots, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para verificar un correo, un teléfono o un segundo factor. Es justo la pantalla donde una mala experiencia hace perder a la gente.

Ojo con

Lo difícil de estos campos (el autocompletado del móvil, pegar el código entero) ya viene resuelto. Lo que falta es lo tuyo: validar el código en el servidor, con límite de intentos.

Accesibilidad

De las mejores: siete señales aria, teclado, autocompletado de código de un solo uso y movimiento reducido.