Enter the code

<div class="demo">
  <form class="demo-field" id="form">
    <label class="demo-label" for="code">Verification code</label>
    <input id="code" name="code">
    <span class="demo-hint">The code is <b>123456</b>. Anything else is refused.</span>
  </form>
  <div class="demo-row">
    <button class="demo-btn" id="paste">Paste an SMS</button>
    <button class="demo-btn" id="manager">Simulate a password manager</button>
    <button class="demo-btn" id="clear">Clear</button>
  </div>
  <p class="demo-out" id="out">Waiting for six digits.</p>
</div>

import { createOtpInput } from 'https://devix.pk/cdn/oss/otp-input@1.0.0/index.js';

const out = document.getElementById('out');

const otp = createOtpInput(document.getElementById('code'), {
  length: 6,
  separators: [2],
  autoFocus: true,
  onChange: (value) => {
    if (value.length < 6) {
      out.textContent = `${value.length} of 6 entered.`;
      out.dataset.state = '';
    }
  },
  onComplete: (value) => {
    if (value === '123456') {
      out.textContent = '✓ Verified.';
      out.dataset.state = 'ok';
      return;
    }
    out.textContent = '✗ That code is not right.';
    out.dataset.state = 'bad';
    otp.reject('That code is not right');
  },
});

document.getElementById('paste').addEventListener('click', () => {
  // Exactly what a message looks like when someone copies the whole thing.
  otp.setValue('Your verification code is 123-456. Do not share it.');
  out.textContent = 'Pasted the whole message — only the digits landed.';
  out.dataset.state = '';
});

document.getElementById('manager').addEventListener('click', () => {
  // A manager drops the whole code into the first box; the field spreads it out.
  const first = document.querySelector('.dxo-slot');
  first.value = '123456';
  first.dispatchEvent(new Event('input', { bubbles: true }));
});

document.getElementById('clear').addEventListener('click', () => {
  otp.clear();
  out.textContent = 'Waiting for six digits.';
  out.dataset.state = '';
});

document.getElementById('form').addEventListener('submit', (event) => event.preventDefault());

@import url('https://devix.pk/cdn/oss/otp-input@1.0.0/otp-input.min.css');

#out { min-height: 2.2em; }
#out[data-state='ok'] { color: #16a34a; font-weight: 600; }
#out[data-state='bad'] { color: #dc2626; font-weight: 600; }