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

> Easily limit OTP input to numeric characters using vue3-otp-input by setting the inputType prop to number. Enhance your OTP component's security and user experience.

- Repository: [Ejiro Asiuwhu/vue3-otp-input](https://github.com/ejirocodes/vue3-otp-input)
- Tags: how-to-guide
- Published: 2026-03-01

---

**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`](https://github.com/ejirocodes/vue3-otp-input/blob/main/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`](https://github.com/ejirocodes/vue3-otp-input/blob/main/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`](https://github.com/ejirocodes/vue3-otp-input/blob/main/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.

```vue
<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:

```vue
<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`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue), which validates clipboard content against numeric patterns.
- **Keystroke filtering** occurs in [`src/components/single-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/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`](https://github.com/ejirocodes/vue3-otp-input/blob/main/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.