OTP Field

OTP Field lets people enter a one-time code shown as boxes. It is one native input, so paste, autofill, and screen readers work, with no script.

Public web API

One root hook, one input, and a length hook that matches maxlength.

<div data-bitsy-otp-field style="--bitsy-otp-field-length: 4">
  <label for="x4">Four digits</label>
  <input id="x4" name="x4" type="text" maxlength="4" value="" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]*">
  
</div>

Set --bitsy-otp-field-length and maxlength to the same number, 4 to 8.
Keep autocomplete="one-time-code" so phones offer the code from messages.
Never use separate inputs per digit.

Lengths and states

The caret marks the active box. Invalid state adds error text, not only a border color.

4 boxes

Four digits

Typed partway

Verification code

Enter the 6-digit code we sent to ada@atlas.app.

Full

Full code

8 boxes

Eight digits

Disabled

Invalid

Invalid code

That code has expired. Request a new one.