# How to Programmatically Fill OTP Input in Vue 3 Using the `fillInput` Method

> Easily programmatically fill OTP input in Vue 3 with the fillInput method. Access it via template refs and instantly populate fields triggering events.

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

---

**Use a template ref to access the `fillInput` method exposed by `vue3-otp-input`, then call `otpRef.value.fillInput('1234')` to populate all input fields instantly while triggering `update:value` and `on-complete` events.**

The `vue3-otp-input` library provides a headless, accessible OTP input component for Vue 3 applications. While users can type digits manually, the component also exposes imperative APIs for programmatic control. The `fillInput` method allows developers to set the OTP value from external sources—such as auto-fill APIs, clipboard paste operations, or backend responses—while maintaining full reactivity and event consistency.

## Understanding the `fillInput` Method Architecture

### Component State Management

The OTP state lives in a reactive array inside the main component file [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue). The component maintains an internal `otp` ref that stores each character as a separate array element:

```typescript
// src/components/vue3-otp-input.vue (lines 51-53)
const otp = ref<string[]>([]);

```

This array acts as the single source of truth. When `fillInput` updates this array, Vue's reactivity system immediately propagates the values to each `SingleOtpInput` child component via the `:value="otp[i]"` binding.

### Method Implementation Details

The `fillInput` method performs three critical operations: input validation, state mutation, and event emission. Located at lines 57-64 in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue), the implementation splits the incoming string, validates its length against the `numInputs` prop, updates the reactive `otp` array, and emits the appropriate events:

```typescript
const fillInput = (value: string) => {
  // Validation and splitting logic
  // Updates otp.value array
  // Emits 'update:value' and 'on-complete'
};

```

The method exposes itself to parent components through Vue 3's `defineExpose` API (lines 13-16), making it accessible via template refs.

## How to Use `fillInput` in Your Vue 3 Component

To programmatically fill the OTP input, first create a template ref pointing to the `vue3-otp-input` component instance. Then invoke `fillInput` with a string matching the length specified by the `num-inputs` prop (default is 4).

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

const otpRef = ref<InstanceType<typeof VOtpInput> | null>(null);
const bindValue = ref("");

// Programmatically fill after API call or auto-fill detection
function populateOtp() {
  // String length must match num-inputs (4 in this example)
  otpRef.value?.fillInput("2929");
}

function handleComplete(value: string) {
  console.log("OTP completed:", value);
}
</script>

<template>
  <v-otp-input
    ref="otpRef"
    v-model:value="bindValue"
    :num-inputs="4"
    @on-complete="handleComplete"
  />
  <button @click="populateOtp">Auto-Fill OTP</button>
</template>

```

When `fillInput("2929")` executes, the method immediately updates all four input fields, synchronizes the `v-model:value` binding through the `update:value` emit, and triggers the `on-complete` event since the OTP is now fully populated.

## TypeScript Implementation with Type Safety

For production applications using TypeScript, explicitly type the template ref to ensure type-safe access to the exposed methods. This prevents runtime errors and enables IntelliSense for `fillInput` and `clearInput`.

```typescript
import { ref } from "vue";
import VOtpInput from "vue3-otp-input";

type OtpComponent = InstanceType<typeof VOtpInput>;

const otpComponent = ref<OtpComponent | null>(null);

function setOtpFromServer(otpFromServer: string) {
  // Validate length matches num-inputs to avoid silent failures
  if (otpFromServer.length === 4) {
    otpComponent.value?.fillInput(otpFromServer);
  } else {
    console.warn("Received OTP length does not match input count");
  }
}

```

The `InstanceType<typeof VOtpInput>` type declaration captures the exposed interface defined in `defineExpose`, ensuring that `fillInput` is recognized as a valid method signature accepting a `string` parameter.

## Clearing OTP Input Programmatically

In addition to `fillInput`, the component exposes a complementary `clearInput` method through the same `defineExpose` block in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue). This method resets the internal `otp` array to empty values and clears the visual input fields.

```vue
<script setup>
const otpRef = ref(null);

function clearAll() {
  otpRef.value?.clearInput(); // Resets UI and internal state
}
</script>

```

Use `clearInput` when implementing "Resend OTP" functionality or when you need to reset the form after a failed validation attempt.

## Summary

- **`fillInput` is exposed via `defineExpose`** in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue), making it accessible through template refs.
- **The method accepts a single string** and automatically splits it across the input fields defined by the `num-inputs` prop.
- **State synchronization** occurs through the reactive `otp` array, which updates child components and emits `update:value` and `on-complete` events.
- **TypeScript support** requires typing the template ref as `InstanceType<typeof VOtpInput>` for compile-time safety.
- **Complementary `clearInput` method** is available for resetting the component state programmatically.

## Frequently Asked Questions

### How do I access the `fillInput` method from a parent component?

Create a template ref using `const otpRef = ref<InstanceType<typeof VOtpInput> | null>(null)` and bind it to the component with `ref="otpRef"`. The `defineExpose` API in `vue3-otp-input` makes `fillInput` available on the ref's `value` property, allowing you to call `otpRef.value?.fillInput('1234')` from any method in the parent component.

### What happens if the string length doesn't match `num-inputs`?

The `fillInput` method validates the input length against the `numInputs` prop before updating the state. If the provided string length does not match the expected number of inputs, the method will not update the OTP fields, preventing partial fills or index errors in the internal `otp` array logic defined in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue).

### Does `fillInput` trigger the `on-complete` event?

Yes. When `fillInput` successfully populates all input fields, it explicitly emits the `on-complete` event with the complete OTP string as the payload. This ensures that any callback functions bound to `@on-complete` execute immediately after programmatic filling, maintaining consistency with manual user input behavior.

### Can I use `fillInput` with the Options API?

Yes. While the examples above use the Composition API with `<script setup>`, the `fillInput` method works identically with the Options API. Declare a template ref in your component's `data` function (e.g., `otpRef: null`), bind it to the component with `ref="otpRef"`, then access the method via `this.$refs.otpRef.fillInput('1234')` in your methods object.