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

> Learn how to programmatically clear OTP input in Vue 3 using the clearInput method. Effortlessly reset fields and bound models with this essential component feature.

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

---

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

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

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

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

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