How to Limit OTP Input to Numeric-Only Characters Using vue3-otp-input

Set the inputType prop to "number" in your vue3-otp-input component to restrict each OTP cell to digits 0-9, blocking alphabetic characters during both keystrokes and paste operations.

The vue3-otp-input library by ejirocodes provides a customizable one-time password component for Vue 3 applications. When you need to enforce numeric-only OTP input, the component offers a built-in validation mechanism through its inputType prop that filters non-digit characters at the source code level.

Understanding the inputType Prop for Numeric Validation

The inputType prop determines which character set is accepted for each OTP cell. According to the source code in src/components/vue3-otp-input.vue (lines 15-18), this prop defaults to "tel" but can be set to "number" to enforce digit-only entry.

When inputType="number" is active, the component activates two layers of validation:

• Paste validation in the parent component that sanitizes clipboard content before it reaches the input fields.
• Keystroke filtering in individual input cells that prevents non-numeric keys from registering.

How Numeric Filtering Works Under the Hood

Paste Validation in the Parent Component

The handleOnPaste function in src/components/vue3-otp-input.vue (lines 1199-1222) intercepts paste events when inputType is set to "number". It applies a regular expression test to the clipboard data and rejects any string containing non-numeric characters, ensuring that pasted content cannot bypass the digit-only restriction.

Keystroke Filtering in Single Input Cells

Each OTP digit cell is managed by src/components/single-otp-input.vue. The handleOnKeyDown method (lines 72-90) guards the keydown event by checking the key code against allowed numeric values. It permits digits from the main keyboard (0-9) and the numeric keypad while blocking alphabetic characters, yet allows control keys (Backspace, Tab, Arrow keys) for navigation.

Implementation: Configuring Numeric-Only OTP Input

To restrict your OTP fields to numeric characters only, pass inputType="number" to the component. For optimal mobile UX, combine this with inputmode="numeric" to trigger the numeric keypad on touch devices.

<template>
  <Vue3OtpInput
    v-model="otpCode"
    :numInputs="6"
    inputType="number"
    inputmode="numeric"
    @on-complete="handleComplete"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Vue3OtpInput from 'vue3-otp-input';

const otpCode = ref('');
const handleComplete = (value: string) => {
  console.log('OTP entered:', value);
};
</script>

For styled implementations, apply custom classes while maintaining the numeric restriction:

<template>
  <Vue3OtpInput
    v-model="pin"
    :numInputs="4"
    inputType="number"
    inputmode="numeric"
    :inputClasses="['w-12', 'h-14', 'border-2', 'rounded-lg', 'text-center', 'text-xl']"
    placeholder="·"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Vue3OtpInput from 'vue3-otp-input';

const pin = ref('');
</script>

Both configurations emit the standard events (update:value, on-change, and on-complete) once the required number of digits is entered, while strictly rejecting any alphabetic input through the validation layers described above.

Summary

• Use inputType="number" to restrict OTP entry to digits 0-9, overriding the default "tel" setting.
• Paste protection is handled by the handleOnPaste function in src/components/vue3-otp-input.vue, which validates clipboard content against numeric patterns.
• Keystroke filtering occurs in src/components/single-otp-input.vue via handleOnKeyDown, blocking non-numeric keys while preserving navigation controls.
• Add inputmode="numeric" alongside inputType="number" to trigger numeric keyboards on mobile browsers for better user experience.

Frequently Asked Questions

What is the default inputType in vue3-otp-input?

The default value for the inputType prop is "tel", which allows telephone number characters including digits, plus signs, and hyphens. To enforce strict numeric-only entry, you must explicitly set inputType="number".

Does setting inputType to number prevent pasting letters?

Yes. When inputType is set to "number", the handleOnPaste function in src/components/vue3-otp-input.vue validates pasted strings using a regular expression test. Any clipboard content containing non-numeric characters is rejected before it populates the input fields.

How do I show the numeric keyboard on mobile devices?

Add the inputmode="numeric" attribute alongside inputType="number". This HTML attribute signals mobile browsers to display the numeric keypad instead of the standard QWERTY layout, improving the user experience for OTP entry.

Can I use decimal points or negative numbers with inputType number?

No. The numeric validation in vue3-otp-input specifically restricts input to the digits 0-9 only. Decimal points, negative signs, and other numeric symbols are treated as invalid characters and are blocked by both the paste validation and keystroke filtering mechanisms.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}