Input OTP

Enter 123456 and verify; the server checks the code and forgets it.

Each preview is its own Live page in a frame, because this site is a Vue 3.5 app built on the Pulsar starter kit. An open list or popover stays inside its frame; in your application it opens over the page.

Installation

suprnova live:add input-otp

Usage

{% import "suprnova-ui/input-otp/input-otp.html" as input_otp %}
{% call input_otp::input_otp("code", "One-time code") %}{% for index in cells %}{% call input_otp::otp_cell(index) %}{% endcall %}{% endfor %}{% endcall %}

Examples

Keyboard and accessibility

suprnova.input-otp - a one-time code as one native input (FORM-006). The input carries the whole code: inputmode numeric, autocomplete one-time-code, a length pattern, and a transient model so the code never enters a snapshot (FORM-004). The cells are presentation only, hidden from assistive technology; sn-input-otp (input-otp.js) mirrors the typed characters into them and marks the active cell, which is the auto-advance the control works without: with the script absent the input is a plain text field that submits the code. The wrapper is keyed with live:preserve.self, so its upgrade marker survives a morph, and the script re-mirrors after a re-render. Classification: varies with the island.

API reference