Example 05 · Visual privacy

Masked private mode

Mask the decorative slot characters and provide an explicit show-or-hide control without changing the underlying native text input.

Live example

Enter, reveal, and hide

Type a six-digit code, then use the button to change the visual presentation. Masking helps with casual shoulder-surfing, but it is not a security boundary.

Implementation

Build this example

Add the mask option and a semantic toggle button inside the component root. The plugin synchronizes its label and pressed state.

JavaScript

The standard initializer discovers both the field and its optional toggle.

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

initA11yOtpFields();

HTML

The toggle is a real button, not a clickable decorative icon.

<div class="a11y-otp" data-a11y-otp
  data-otp-length="6" data-otp-type="numeric"
  data-otp-mask="true">
  <label for="masked-code">Verification code</label>
  <p id="masked-code-hint">
    Use the toggle to reveal or hide the code.
  </p>
  <div class="a11y-otp__control">
    <input class="a11y-otp__input" id="masked-code"
      name="maskedCode" type="text" inputmode="numeric"
      autocomplete="one-time-code" maxlength="6"
      aria-describedby="masked-code-hint" />
  </div>
  <div class="a11y-otp__actions">
    <button class="a11y-otp__toggle" type="button"
      aria-pressed="false">Show code</button>
  </div>
  <p class="a11y-otp__error"></p>
  <p class="a11y-otp__status" aria-live="polite"></p>
</div>