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

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. The component maintains an internal otp ref that stores each character as a separate array element:

// 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, the implementation splits the incoming string, validates its length against the numInputs prop, updates the reactive otp array, and emits the appropriate events:

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).

<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.

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. This method resets the internal otp array to empty values and clears the visual input fields.

<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, 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.

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.

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