Example 02 · Visual grouping

Grouped 3–3 slots

Present a six-digit code as two readable groups without splitting the form value or changing the input’s native keyboard behavior.

Live example

Read in groups, edit as one field

The extra spacing is visual only. Arrow keys, selection, paste, autofill, and form submission continue to operate on the native input.

Implementation

Build this example

Start with the basic numeric pattern and add a grouping attribute to the root. The initialization code does not change.

JavaScript

The initializer reads the grouping data attribute when it creates the decorative presentation.

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

initA11yOtpFields();

HTML

The grouping configuration belongs on the same root as the length and input type.

<div class="a11y-otp"
  data-a11y-otp
  data-otp-length="6"
  data-otp-type="numeric"
  data-otp-groups="3,3">
  <label for="grouped-code">Verification code</label>
  <p id="grouped-code-hint">Enter the 6-digit code.</p>
  <div class="a11y-otp__control">
    <input class="a11y-otp__input" id="grouped-code"
      name="groupedCode" type="text" inputmode="numeric"
      autocomplete="one-time-code" maxlength="6"
      aria-describedby="grouped-code-hint" />
  </div>
  <p class="a11y-otp__error"></p>
  <p class="a11y-otp__status" aria-live="polite"></p>
</div>