A11y OTP Field

Example 03 · Character rules

Uppercase alphanumeric

Accept letters and numbers in one verification field and normalize typed or pasted letters to uppercase.

Live example

Try letters and numbers

Enter a value such as ab12cd. The component filters unsupported characters and presents the result as AB12CD.

Letters are automatically converted to uppercase.

Implementation

Build this example

Set the root to alphanumeric mode and opt into uppercase normalization. The real input remains type="text".

JavaScript

Initialization reads the mode and normalization rules directly from the root element.

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

initA11yOtpFields();

HTML

Pair the component configuration with native text-entry attributes.

<div class="a11y-otp" data-a11y-otp
  data-otp-length="6"
  data-otp-type="alphanumeric"
  data-otp-uppercase="true">
  <label for="alphanumeric-code">Verification code</label>
  <p id="alphanumeric-code-hint">
    Letters are converted to uppercase.
  </p>
  <div class="a11y-otp__control">
    <input class="a11y-otp__input" id="alphanumeric-code"
      name="alphaCode" type="text" inputmode="text"
      autocomplete="one-time-code" maxlength="6"
      spellcheck="false" autocapitalize="characters"
      aria-describedby="alphanumeric-code-hint" />
  </div>
  <p class="a11y-otp__error"></p>
  <p class="a11y-otp__status" aria-live="polite"></p>
</div>