Verification Code

Selectors

.verification-code: Flex container for individual code input cells.
[data-name]: Sets the hidden input's name attribute for form submission.
[data-error]: Error state modifier — turns borders red.

6-Digit

HTML

<div class="verification-code" data-name="code" role="group" aria-label="Verification code">
  <input><input><input><input><input><input>
</div>

With Separator

–

HTML

<div class="verification-code" data-name="verify" role="group" aria-label="Verification code">
  <input><input><input>
  <span>&ndash;</span>
  <input><input><input>
</div>

Error State

Invalid verification code.

HTML

<div class="verification-code" data-name="error-demo" data-error role="group" aria-label="Verification code" aria-describedby="error-demo-msg">
  <input value="1"><input value="2"><input value="3"><input value="4"><input value="5"><input value="6">
</div>
<small id="error-demo-msg">Invalid verification code.</small>

Usage

Use inside a .cider container. Handles auto-advance, backspace, paste, and arrow key navigation. Syncs values to a hidden input and auto-sets maxlength and inputmode.

<!-- npm -->
<script src="node_modules/ciderui/js/cider.js"></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/js/cider.js"></script>

Events

A complete event fires on the container when all slots are filled. Use it to auto-submit or validate.

document.querySelector('.verification-code')
  .addEventListener('complete', (e) => {
    console.log('Code entered:', e.detail.code);
    // Auto-submit form or trigger validation
  });

Accessibility

Each slot is labeled "Digit N of M" for screen readers.
The container has role="group" and aria-label="Verification code".
Sets inputmode="numeric" and autocomplete="one-time-code" for mobile keyboards.
Paste support: paste a full code and it distributes across all slots automatically.
[data-name] sets the hidden input's name attribute. Defaults to "code" if omitted.