Input OTP
Input OTP is a native web component that renders a series of single-character boxes for entering verification codes (one-time code). Typing advances automatically, Backspace goes back and clears, the arrow keys navigate, and pasting a code fills all boxes at once. Use it in two-factor authentication flows, email or SMS verification, and PIN confirmations.
Preview
<div style="display:flex;flex-direction:column;gap:.75rem;align-items:flex-start">
<label style="font-size:.875rem;font-weight:550">Enter the verification code</label>
<pura-input-otp id="otp" length="6" mono></pura-input-otp>
<small id="otp-status" style="color:var(--pura-muted-fg)">6 digits sent to your email.</small>
</div>
<script type="module">
const otp = document.getElementById("otp");
const status = document.getElementById("otp-status");
otp.addEventListener("complete", (e) => {
status.textContent = "Code complete: " + e.detail.value;
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of digit boxes rendered. |
value | string | "" | Current code; mirrored to the attribute on every change. |
disabled | boolean | false | Disables all input boxes. |
invalid | boolean | false | Applies the error style and sets aria-invalid. |
alphanumeric | boolean | false | Accepts letters and numbers; without it, digits only. |
mono | boolean | false | Uses a monospaced font in the boxes. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/input-otp.js"></script>import "./pura/lib/input-otp.js";