How to Clear OTP Input Programmatically Using the clearInput Method in Vue 3

The vue3-otp-input component exposes a clearInput method via defineExpose that empties the internal OTP array, resets the focus index, and emits empty values to bound models, allowing parent components to reset the input fields programmatically.

The vue3-otp-input library provides a flexible one-time password input component for Vue 3 applications. When building authentication flows, you often need to reset the OTP fields programmatically—such as after a failed verification attempt or when switching between input modes. The component's clearInput method, defined in the source code and exposed through Vue 3's Composition API, enables this functionality through template refs.

Understanding the clearInput Method Implementation

The clearInput method is implemented in src/components/vue3-otp-input.vue and handles the complete state reset required to empty the OTP input fields.

Method Definition and State Management

Located at lines 48-55 of the component source, the clearInput method performs three critical operations:

1. Resets the OTP array: Reassigns the reactive otp ref to an empty array, which automatically updates all child input components
2. Emits model updates: Triggers "update:value" and "on-change" events with empty strings to synchronize parent component bindings
3. Resets focus: Returns the active input index to 0, preparing the component for fresh user input

Exposing the Method to Parent Components

To make clearInput accessible from parent components, the component uses Vue 3's defineExpose compiler macro at lines 212-216:

defineExpose({
  clearInput,
  fillInput
});

This exposure pattern allows parent components to invoke the method directly through template refs, bypassing the need for prop drilling or event-based communication.

How to Programmatically Clear OTP Input in Your Application

Implementing the clear functionality requires creating a template ref to the OTP component and calling the exposed method when needed.

Basic Component Setup with Template Refs

First, import the component and create a typed template ref:

<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("");
</script>

<template>
  <v-otp-input
    ref="otpRef"
    v-model:value="bindValue"
    :num-inputs="4"
    input-classes="otp-input"
  />
</template>

Triggering Clear on User Interaction

Attach the clearInput method to button clicks or other events:

const clearOtp = () => {
  otpRef.value?.clearInput();
};

When invoked, this method immediately clears all input fields, resets the internal state as defined in src/components/vue3-otp-input.vue, and updates any bound v-model values to empty strings.

Using clearInput in Composables

For applications using state management or reusable logic, expose the clear functionality through composables:

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

export const useOtp = () => {
  const otpComponent = ref<InstanceType<typeof VOtpInput> | null>(null);

  const reset = () => {
    otpComponent.value?.clearInput();
  };

  return { otpComponent, reset };
};

This pattern, demonstrated in the repository's src/App.vue, allows multiple components to share OTP reset logic while maintaining clean separation of concerns.

Summary

• The clearInput method in vue3-otp-input provides a programmatic way to reset OTP fields without manual DOM manipulation.
• Located in src/components/vue3-otp-input.vue at lines 48-55, the method clears the internal otp array, emits empty values to update v-model bindings, and resets the focus index.
• Access requires creating a template ref to the component and calling clearInput() through the exposed API defined at lines 212-216.
• The method integrates seamlessly with Vue 3's Composition API, supporting both direct template usage and abstracted composable patterns.

Frequently Asked Questions

How do I access the clearInput method from a parent component?

Create a template ref using ref<InstanceType<typeof VOtpInput>>(), bind it to the v-otp-input component via the :ref attribute, then call otpRef.value?.clearInput(). The component exposes this method through Vue 3's defineExpose compiler macro, making it available on the ref instance without prop drilling.

Does clearInput update the v-model binding automatically?

Yes. When clearInput() executes, it emits both "update:value" and "on-change" events with empty strings. If your component uses v-model:value binding, these emitted events automatically synchronize the parent component's bound value to an empty string, ensuring reactive consistency across your application state.

What happens to the input focus after calling clearInput?

The method resets the internal activeInput index to 0, causing focus to return to the first input field. This behavior, implemented in src/components/vue3-otp-input.vue, prepares the component for immediate re-entry without requiring the user to manually click the first input box after clearing.

Can I use clearInput inside a Vue composable or Pinia store?

Yes. Pass the template ref into your composable or store action, then invoke clearInput() on that ref. The repository's example in src/App.vue demonstrates this pattern by exposing reset functionality through reusable logic, allowing multiple components to share OTP management while maintaining the ability to programmatically clear inputs from centralized state management.

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