HTML + CSSInputs
Six-digit code input
Six boxes for a one-time code that jump to the next one by themselves, with the active box gently pulsing.
Settings
16px
1x
Code
<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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
Where to use it
This is the screen after “We sent you a code”: two-factor login in a banking app, confirming a phone number at sign-up or checking an email before a password reset. Each box takes one digit, letters are ignored and backspace goes back a box. An OTP input in HTML, CSS and a little JavaScript.
Pasting a full code from an SMS only fills the first box in this version, so add paste handling if your users copy codes a lot. On phones, the numeric keypad opens by itself, which makes typing quick.