Forms

One-time password

Build a complete six-digit OTP control with paste, navigation, autocomplete, and a synchronized submitted value.

Forms guideCopy-ready referencev0.7.0 current

Forms

One-time password

The OTP controller accepts one character per field, advances focus, supports full-code paste, handles arrow and Backspace navigation, and synchronizes one submitted value. Pasted characters are filtered by the configured pattern; if a paste contains more valid characters than available fields, the entire paste is rejected without changing the inputs, value, or state.

Six-digit verification code

HTML · Complete six-digit OTP

<form>
  <div class="bs-form-group">
    <span class="bs-label" id="verification-code-label">
      Six-digit code
    </span>
    <div
      class="bs-otp"
      data-bs-otp
      aria-labelledby="verification-code-label"
    >
      <input class="bs-otp-input" aria-label="Digit 1" data-bs-otp-input />
      <input class="bs-otp-input" aria-label="Digit 2" data-bs-otp-input />
      <input class="bs-otp-input" aria-label="Digit 3" data-bs-otp-input />
      <input class="bs-otp-input" aria-label="Digit 4" data-bs-otp-input />
      <input class="bs-otp-input" aria-label="Digit 5" data-bs-otp-input />
      <input class="bs-otp-input" aria-label="Digit 6" data-bs-otp-input />
      <input
        type="hidden"
        name="verification_code"
        data-bs-otp-value
      />
    </div>
    <span class="bs-form-text">
      Paste a code that fits the remaining fields or enter one digit at a time.
    </span>
  </div>
</form>

JavaScript · Initialize and handle completion

import "@boobstrap/boobstrap";
import { initOtps } from "@boobstrap/boobstrap/js/otp";

const [verificationCode] = initOtps(document);

verificationCode.element.addEventListener("bs:otp:complete", (event) => {
  console.log("Complete code:", event.detail.value);
});

Autocomplete: the controller applies autocomplete="one-time-code" to the first field and numeric input mode to every field. Use data-bs-otp-pattern only when the code accepts characters other than digits.