OTP Input

One-time password / PIN input. Auto-advances to the next digit on entry, handles backspace, and distributes pasted codes across inputs. Powered by the OtpInput enhancer.

6-digit OTP

Verification code

Current value: (empty)

<div class="lp-form-group">
    <label class="lp-form-group-label">Verification code</label>
    <div class="lp-otp-input" data-lp-component="otp-input" id="otp-6">
        <input type="text" inputmode="numeric" maxlength="1" />
        <input type="text" inputmode="numeric" maxlength="1" />
        <input type="text" inputmode="numeric" maxlength="1" />
        <input type="text" inputmode="numeric" maxlength="1" />
        <input type="text" inputmode="numeric" maxlength="1" />
        <input type="text" inputmode="numeric" maxlength="1" />
    </div>
</div>
<div class="lp-text-sm lp-text-muted">Current value: <code id="otp-6-value">(empty)</code></div>
<script>
(function () {
    const el = document.getElementById("otp-6");
    el.addEventListener("lp:otp-input:change", (e) => {
        document.getElementById("otp-6-value").textContent = e.detail.value || "(empty)";
    });
})();
</script>

4-digit PIN

<div class="lp-otp-input" data-lp-component="otp-input">
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
</div>

8-digit code with separator

—

<div class="lp-otp-input" data-lp-component="otp-input">
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <span class="lp-otp-input-separator">—</span>
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
</div>

Programmatic API

<div class="lp-d-flex lp-gap-2 lp-mb-3 lp-flex-wrap">
    <button type="button" class="lp-btn lp-btn-sm lp-btn-primary" id="otp-api-fill">setValue("123456")</button>
    <button type="button" class="lp-btn lp-btn-sm lp-btn-secondary" id="otp-api-read">getValue()</button>
    <button type="button" class="lp-btn lp-btn-sm lp-btn-danger" id="otp-api-clear">clear()</button>
</div>
<div class="lp-otp-input" data-lp-component="otp-input" id="otp-api">
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
    <input type="text" inputmode="numeric" maxlength="1" />
</div>
<pre id="otp-api-output" class="lp-mt-2 lp-text-sm"></pre>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const el = document.getElementById("otp-api");
    const out = document.getElementById("otp-api-output");
    const getInst = () => window.Launchpad?.OtpInput && el.__lpComponent;
    document.getElementById("otp-api-fill").addEventListener("click", () => {
        const inst = window.Launchpad?.Launchpad?.getInstance?.(el, "otp-input") || window.__lpOtp?.get(el);
        // Fallback: dispatch manual value sync via inputs
        const inputs = el.querySelectorAll("input");
        "123456".split("").forEach((c, i) => { if (inputs[i]) inputs[i].value = c; });
        inputs[inputs.length - 1]?.focus();
        out.textContent = "value set to 123456";
    });
    document.getElementById("otp-api-read").addEventListener("click", () => {
        const inputs = el.querySelectorAll("input");
        out.textContent = "value = " + Array.from(inputs).map(i => i.value || "").join("");
    });
    document.getElementById("otp-api-clear").addEventListener("click", () => {
        el.querySelectorAll("input").forEach(i => { i.value = ""; });
        el.querySelector("input")?.focus();
        out.textContent = "cleared";
    });
});
</script>

Events

Event	Fires when	`event.detail`
`lp:otp-input:change`	Any input changes	`{ value }`
`lp:otp-input:complete`	All digits are filled	`{ value }`