FEA OTP

Playground

Length, masking, direction, input mode, auto-submit — change them and the live field changes with you. Paste a full code into any box and it distributes; arrow keys and backspace behave the way a keyboard user expects.

Runs entirely in your browserotp-input-kit

A React-native re-implementation of the behaviours in otp-input-kit — the published framework-agnostic library. The library is what you install; this is where you decide how you want it configured.

Length — 6

Input mode

Separator after every

Mask the charactersRight-to-leftAuto-submit when complete

Live field

Paste a full code into any box — it distributes across the field.

Value: empty
Complete: 0/6

Snippet

import { OtpInput } from "otp-input-kit";

new OtpInput(document.querySelector("#code"), {
  length: 6,
  mode: "numeric",
  mask: false,
  dir: "ltr",
  onComplete: (code) => form.requestSubmit(),
});

Install

npm i otp-input-kit