Forms

Code input

Boxes for a short code from an email or a text message. Typing moves on by itself, and a pasted code fills every box.

Six digits

Try typing or pasting 123456.

HTML

<div>
  <div class="pw-otp" data-pw-otp data-length="6" data-split="3" data-name="code" aria-label="Verification code" id="demo-otp"></div>
  <p class="demo-out" id="demo-otp-out">Try typing or pasting 123456.</p>
</div>

JavaScript

document.getElementById('demo-otp').addEventListener('pw:complete', function (e) {
  document.getElementById('demo-otp-out').textContent = 'Complete: ' + e.detail.value;
});

Letters and numbers, hidden

HTML

<div class="pw-otp" data-pw-otp data-length="4" data-type="text" data-mask aria-label="Access code"></div>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-length`	`6`	Number of boxes, 2 to 12.
`data-name`		Name of a hidden field that holds the whole code, for your form.
`data-type`	`number`	`text` also allows letters (shown in capitals).
`data-split`		A dash after this many boxes.
`data-mask`		Shows dots instead of the characters.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:change`	With `value`.
`pw:complete`	When every box is filled, with `value`.

From your script

var c = Partwise.get('#demo-otp', 'otp');
c.value; c.value = '123456';
c.clear(); c.focus();
c.invalid();     // red borders after a wrong code

Keyboard

Key	Action
`0-9`	Fill the box and move on
`Backspace`	Clear the box, or go back one
`Left` `Right`	Move between boxes
`Home` `End`	First and last box

Good to know

The first box has autocomplete="one-time-code", so phones can offer the code from a text message.
Give the group a name with aria-label.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/23-inputs.css, js/23-inputs.js.