Skip to documentation
BoobstrapDocs
Forms

One-time password

Build a complete six-digit OTP control with paste, navigation, autocomplete, validation feedback, 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

Six-digit code
Paste a code that fits the remaining fields or enter one digit at a time.
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);
});

Invalid OTP code

Security verification code
HTML · Invalid OTP code
<div class="bs-form-group">
  <span class="bs-label" id="otp-invalid-label">
    Security verification code <span class="bs-label-required" aria-hidden="true">*</span>
  </span>
  <div class="bs-otp" aria-labelledby="otp-invalid-label">
    <input class="bs-otp-input bs-is-invalid" aria-label="Digit 1" value="4" aria-invalid="true" aria-describedby="otp-error" />
    <input class="bs-otp-input bs-is-invalid" aria-label="Digit 2" value="9" aria-invalid="true" aria-describedby="otp-error" />
    <input class="bs-otp-input bs-is-invalid" aria-label="Digit 3" value="1" aria-invalid="true" aria-describedby="otp-error" />
    <input class="bs-otp-input bs-is-invalid" aria-label="Digit 4" value="0" aria-invalid="true" aria-describedby="otp-error" />
    <input class="bs-otp-input bs-is-invalid" aria-label="Digit 5" value="8" aria-invalid="true" aria-describedby="otp-error" />
    <input class="bs-otp-input bs-is-invalid" aria-label="Digit 6" value="2" aria-invalid="true" aria-describedby="otp-error" />
  </div>
  <span class="bs-form-feedback bs-form-feedback-invalid" id="otp-error">
    The verification code entered is incorrect or has expired.
  </span>
</div>
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.

One-Time Password API

OTP classes and data attributes organize segmented verification input boxes with automated focus control and value synchronization.

Class / Data AttributePurpose
.bs-otpFlex container wrapping segmented character input fields and the hidden synchronized value input.
.bs-otp-inputIndividual single-character input box with centered text alignment and focus indicators.
.bs-is-invalidNegative validation state applied to digit fields when code verification fails.
data-bs-otpInitializes the vanilla JavaScript OTP controller on the container.
data-bs-otp-inputMarks an individual digit field as a participant in the OTP controller.
data-bs-otp-valueDesignates the hidden input where the aggregated code string is synchronized for form submission.
data-bs-otp-patternCustom regular expression pattern string for validating acceptable pasted or typed characters.
bs:otp:completeEvent fired on the OTP container when all character fields have been filled.
.bs-form-feedback-invalidError feedback message describing expired or incorrect verification codes.