A11y OTP Field

Example 01 · Core pattern

Basic numeric code

A six-digit verification field built from one labeled text input. Type, edit, paste, or use one-time-code autofill with the browser’s familiar input behavior.

Live example

Enter a six-digit code

The visible slots mirror one real input. Click anywhere on the slot group, use the arrow keys, or paste a complete code.

Enter the 6-digit code we sent to your phone.

Implementation

Build this example

Use one semantic input, then initialize every element carrying data-a11y-otp.

JavaScript

The initializer progressively enhances matching fields and leaves the original input as the real control.

import { initA11yOtpFields } from "./dist/index.js";

initA11yOtpFields();

HTML

Keep the verification code in one labeled text input.

<div class="a11y-otp"
  data-a11y-otp
  data-otp-length="6"
  data-otp-type="numeric">
  <label for="verification-code">
    Verification code
  </label>
  <p id="verification-code-hint">
    Enter the 6-digit code.
  </p>
  <div class="a11y-otp__control">
    <input class="a11y-otp__input"
      id="verification-code"
      name="verificationCode"
      type="text"
      inputmode="numeric"
      autocomplete="one-time-code"
      pattern="[0-9]*"
      maxlength="6"
      aria-describedby="verification-code-hint" />
  </div>
  <p class="a11y-otp__error"></p>
  <p class="a11y-otp__status" aria-live="polite"></p>
</div>