OTP input
One-time-code entry. Auto-advances, handles backspace and paste, supports SMS autofill on the first box.
Six digits
<div class="mn-otp" role="group" aria-label="Verification code">
<input><input><input><span class="mn-otp-sep" aria-hidden="true">–</span><input><input><input>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/otp-input.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-otp | Wrapper around N inputs. |
| data-mn-otp="alphanumeric" | Allow letters too. |
| mn-otp-sep | Visual separator. |
Accessibility
- Wrap in a fieldset or give the group role="group" and a label. Each box gets "Character n of N". Emits mn:complete with the full code.