OTP input · verification code

A code field in boxes that takes a paste or an SMS autofill in one go, moves as you type, checks itself when full, shakes on a wrong code, and counts down to “Resend”.

Six digits · paste the whole code · it checks itself when full

Enter the code we sent to +90 ••• ••• 42 17

Didn't get it? Resend in 0:30

Hint: 123456 · typing clears the error

A masked PIN · a licence key in letters and digits

Licence key

Sizes · disabled

Usage

JavaScript

import { signal } from "./index.js";import { OtpInput } from "./components/otp.js"; const code = signal(""), error = signal("");OtpInput({ value: code, length: 6, groups: [3, 3], error,           onComplete: (c) => verify(c).catch(() => error.set("That code isn't right")),           resend: { seconds: 30, onResend: sendAgain } }) OtpInput({ length: 4, mask: true })                                   // a PINOtpInput({ length: 8, type: "alphanumeric", groups: [4, 4] })         // letters too, uppercased// one real <input autocomplete="one-time-code"> under the boxes: paste, SMS autofill,// mobile number pads and screen readers all work; typing over a box replaces it