Composite
Input OTP Requires JS
One-time-code input. Auto-advances on each digit, accepts paste, supports a custom mask (4 / 6 / 8 cells).
About
Overview
For 2FA / verification codes. Each digit gets its own visible cell so users can see exactly how many digits are expected. Paste the whole code at once and it distributes across cells.
Live
Demo
<ren-otp class="ren-otp" length="6" type="numeric"></ren-otp>Reference
API
| Attribute | Type | Default | Notes |
|---|---|---|---|
length | number | 6 | How many digits the code has. Slots are generated by the component — do not author them by hand. |
type | "numeric" | "alphanumeric" | "numeric" | Filters what each slot accepts and sets the slot inputmode (numeric or text) for mobile keyboards. |
disabled | boolean | false | Disables every slot. |
Inclusive by default
Accessibility
- Each cell is a real input with
aria-label="Code digit N of M", so screen readers announce the position. Arrow keys, Backspace, Home / End move between cells; pasting the whole code from any cell distributes it across the rest. - Give the group its own visible heading or
<label>nearby — the host element carries no group role of its own.