OTP Input

El OTP input es el campo para ingresar un código de verificación de un solo uso, con una caja por dígito. Se usa para confirmar un celular, un correo o una operación sensible.

Propiedades y configuraciones

Cuando usarlo

Úsalo para verificar que la persona tiene acceso a un celular o correo, justo después de enviarle un código temporal: validar el contacto al registrarse, confirmar el cambio de datos o autorizar una operación sensible.

Si el dato es permanente o la persona ya lo conoce (RUT, número de documento, fecha de nacimiento, clave), usa Text field. Para iniciar sesión en servicios del Estado, usa el botón de ClaveÚnica en vez de un código propio.

Buenas prácticas

Recomendado: Indica a dónde se envió el código

Muestra el medio y un dato parcial del destino. Así la persona sabe dónde buscar y detecta si el contacto es incorrecto.

Recomendado: Haz coincidir las cajas con el largo real del código

La cantidad de cajas anticipa el código que llegará. Si el SMS trae 6 dígitos, el campo debe tener 6 cajas.

Recomendado: Ofrece reenviar el código y di cuándo hacerlo

Los mensajes pueden tardar o no llegar. Incluye el link “Reenviar” e indica el tiempo de espera o la vigencia del código.

Recomendado: Explica el error y cómo seguir

Si el código es incorrecto o venció, dilo con claridad y ofrece la salida: reenviar un código nuevo.

Malas prácticas

No recomendado: No lo uses para datos que no son códigos temporales

Las cajas por dígito son para códigos cortos de un solo uso. Un año de nacimiento o parte de un RUT van en un Text field.

No recomendado: No muestres más o menos cajas que el código enviado

Si el SMS trae 6 dígitos y el campo tiene 4, la persona no sabe si recortar el código o si recibió uno equivocado.

No recomendado: No lo dejes sin contexto ni opción de reenvío

Un campo “Código” sin más información no dice de dónde sale el código ni qué hacer si no llega.

No recomendado: No lo mezcles con otros campos del formulario

La verificación es un paso propio. Ponerla entre otros datos obliga a salir a buscar el código a mitad del formulario.

Recomendaciones de accesibilidad

Agrupa las cajas bajo un solo nombre
El contenedor de las cajas es un role="group" con aria-labelledby hacia el label. Mantén ese vínculo para que se anuncie “Código de verificación” al entrar al grupo.

Nombra cada caja por su posición
Cada input lleva aria-label="Dígito N de M". Actualiza el total si cambias la cantidad de dígitos para que la persona sepa cuánto falta.

Habilita el autocompletado del código
Conserva autocomplete="one-time-code" e inputmode="numeric": permiten que el sistema proponga el código recibido por SMS y muestran el teclado numérico en móvil.

Implementa el pegado y el foco con cuidado
El kit no trae enhancer. Al programar el avance de foco, permite pegar el código completo desde cualquier caja, retroceder con Borrar y no muevas el foco de forma inesperada.

No impongas tiempos sin aviso
Si el código vence, dilo antes de que ocurra y permite pedir uno nuevo sin perder lo avanzado. Los tiempos cortos afectan a quienes usan tecnologías de asistencia o tienen dificultades motoras.

Anuncia el error
Además de .cl-otp--error, marca los inputs con aria-invalid="true" y asocia el mensaje de la ayuda con aria-describedby, para que el error se lea al volver a las cajas.