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 length="6" pattern="3-3"></ren-otp>Reference
API
| Attribute | Type | Default | Notes |
|---|---|---|---|
length | number | 6 | How many digits the code has. |
pattern | string (e.g. "3-3") | — | Visual grouping with a separator. "3-3" = three cells, dash, three cells. |
inputmode | "numeric" | "text" | "numeric" | Mobile keyboard hint. |
Inclusive by default
Accessibility
- Each cell is a real input — Tab moves between, paste splits, autocomplete
autocomplete="one-time-code"is set so iOS / Android suggest codes from SMS. - Wrap in a
<label>for the whole group.