HTML + CSSInputs

Código OTP de 6 dígitos

Seis casillas para un código de un solo uso que saltan solas a la siguiente; la activa late suavemente.

Ajustes

Color principal#0071e3

Color secundario#8ec5ff

Tamaño16px

Velocidad1x

Código

index.html

<div class="uv-in2o"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Inputs

Input con label flotante

InputsReact + Motion

Interruptor toggle

InputsReact + Motion

Buscador de viajes

InputsReact + Motion

Selector de cantidad

InputsReact + Motion

Código OTP

InputsReact + Motion

Toggle estilo iOS

InputsReact + Motion

Rango de precio

InputsReact + Motion

Etiqueta flotante de color

InputsHTML + CSS

Dónde usarlo

Es la pantalla que llega tras «Te hemos enviado un código»: el doble factor de la app del banco, confirmar el móvil al registrarte o verificar el correo antes de cambiar la contraseña. Cada casilla admite un número, las letras se ignoran y el borrado vuelve atrás. Un input OTP en HTML, CSS y un poco de JavaScript.

Si pegas el código entero desde un SMS, en esta versión solo se rellena la primera casilla; añade el pegado si tus usuarios copian códigos a menudo. En el móvil se abre solo el teclado numérico.