A11y OTP Field

Example 09 · Resilient baseline

No JavaScript fallback

The unenhanced experience is still a labeled text field that accepts a verification code, supports browser autofill, and participates in ordinary form submission.

Live example

Use the baseline field

This page intentionally does not import or initialize the component script. The visual slot enhancement is absent, but the task still works.

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

Implementation

Build this example

Include the component stylesheet if you want its baseline form styling, but omit data-a11y-otp and the module import to leave the field unenhanced.

JavaScript

No initialization is required for the baseline. Add the module only when you want decorative slots and the component API.

// Intentionally empty: the native input is already usable.

HTML

Notice that the root does not carry the enhancement hook.

<link rel="stylesheet" href="./dist/styles.css" />

<form>
  <div class="a11y-otp" data-otp-length="6">
    <label class="a11y-otp__label" for="no-js-code">
      Verification code
    </label>
    <p class="a11y-otp__hint" id="no-js-code-hint">
      Enter the 6-digit code.
    </p>
    <div class="a11y-otp__control">
      <input class="a11y-otp__input" id="no-js-code"
        name="verificationCode" type="text"
        inputmode="numeric" autocomplete="one-time-code"
        pattern="[0-9]*" maxlength="6"
        aria-describedby="no-js-code-hint" />
    </div>
  </div>
  <button type="submit">Verify</button>
</form>