Why Vue OTP Pro?
Most OTP input libraries give you a bare <input> and leave styling, accessibility, and edge cases to you. Vue OTP Pro ships with everything built in.
At a Glance
11 Themes
From minimal underlines to glowing neon — pick a theme and ship.
Bug-Free
Fixes known issues with partial v-model sync, IME input, and paste handling.
Mobile Ready
iOS SMS autofill, Android paste, Chinese IME — all handled correctly.
~3 KB
Smaller than the competition, with more features. Tree-shakeable.
Composable API
useOtp() composable for building custom OTP UIs from scratch.
Accessible
ARIA labels, role=group, keyboard nav. Screen reader tested.
Quick Comparison
| Feature | Vue OTP Pro | vue3-otp-input |
|---|---|---|
| Built-in themes | 11 themes | None (BYO CSS) |
| Color variants | 5 variants | None |
| Size presets | 4 sizes (sm-xl) | None |
| Animations | Pop, shake, pulse | None |
| CSS custom properties | Full theming API | None |
| Separator slot | Yes | String only |
| IME / Chinese input | Handled | Broken |
| Partial v-model sync | Works | Broken |
| Paste delimiter strip | Auto-filtered | Not handled |
| Readonly mode | Yes | No |
| ARIA accessibility | Built-in | None |
| TypeScript | Full types exported | Partial |
| Composable API | useOtp() | None |
| Per-input classes | Array or function | Array only |
| AI / LLM docs | llms.txt included | None |
| Gzipped size | ~3 KB | ~5 KB |
Full Comparison
See the detailed library comparison for a comprehensive side-by-side with PrimeVue, Syncfusion, vue3-otp-input, and @healerlab.
Known Issues We Fixed
These are documented bugs in vue3-otp-input that are not present in Vue OTP Pro:
1. Partial v-model sync
When a parent component sets a value shorter than numInputs, the original component silently ignores it. This breaks incremental fill, filtering, and any parent-driven state management.
Vue OTP Pro: Accepts any length value and correctly pads remaining inputs as empty.
2. Chinese / IME character bypass
When inputType="number", Chinese characters can still be entered via IME composition because the original only validates on keydown — which IME bypasses entirely.
Vue OTP Pro: Handles compositionstart/compositionend events and validates the composed result, stripping invalid characters.
3. Paste with delimiters
Pasting a code like 123-456 includes the dash as a character. Users expect only digits to be extracted.
Vue OTP Pro: All paste and multi-char input is filtered through isValidChar() before being applied.