# How to Access vue3-otp-input Component Methods via Template Ref in Vue 3

> Learn to access vue3-otp-input component methods like clearInput and fillInput using template refs in Vue 3. This guide shows you how to control the OTP input directly from your template.

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

---

**Use a Vue 3 template ref typed as `InstanceType<typeof VOtpInput>` to access the `clearInput()` and `fillInput()` methods exposed by the vue3-otp-input component through `defineExpose`.**

The vue3-otp-input library provides programmatic control over OTP input fields through component methods that are explicitly exposed for external access. By binding a template ref to the component instance, you can invoke these methods to clear user input or programmatically fill the fields from your parent component.

## Exposed Methods in vue3-otp-input

The component exposes two public methods via Vue 3's `defineExpose` API in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue) (lines 13-16):

- **`clearInput()`** – Resets all OTP fields to empty strings and resets the active input focus to the first field
- **`fillInput(value: string)`** – Programmatically fills all fields with the provided string (length must match the `numInputs` prop)

These methods are defined in the component setup and made available to parent components through the `defineExpose` block:

```typescript
// src/components/vue3-otp-input.vue
defineExpose({
  clearInput,
  fillInput,
});

```

## Setting Up the Template Ref

To access these methods, create a ref that can hold the component instance and bind it to the `<vue3-otp-input>` element in your template.

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

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

// Type the ref to match the component instance
const otpInput = ref<InstanceType<typeof VOtpInput> | null>(null);
</script>

```

Then attach the ref to the component in your template:

```html
<template>
  <vue3-otp-input
    ref="otpInput"
    :num-inputs="4"
    v-model:value="otpValue"
  />
</template>

```

## Calling Component Methods

Once the ref is bound, you can invoke the exposed methods on the component instance.

### Clearing Input with clearInput()

Call `clearInput()` to reset all OTP fields and return focus to the first input:

```typescript
function clearOtpFields() {
  otpInput.value?.clearInput();
}

```

This method clears the internal `otp` array, resets `activeInput` to 0, and emits `update:value` and `on-change` events with empty strings.

### Filling Input with fillInput()

Use `fillInput()` to programmatically populate the OTP fields. The value length must exactly match the `numInputs` prop:

```typescript
function autoFillOtp() {
  // For a 4-input OTP component
  otpInput.value?.fillInput('1234');
}

```

If the provided string length matches `numInputs`, the method splits the string into individual characters, updates the internal state, and emits `update:value` and `on-complete` events.

## Complete Working Example

Here is a full implementation based on the repository's demo file ([`src/App.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/App.vue)):

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

const otpInput = ref<InstanceType<typeof Vue3OtpInput> | null>(null);
const bindValue = ref("");

function clear() {
  if (unref(otpInput)) {
    unref(otpInput)?.clearInput();
  }
}

function fill() {
  if (unref(otpInput)) {
    unref(otpInput)?.fillInput("1234");
  }
}
</script>

<template>
  <div>
    <button @click="clear">Clear OTP</button>
    <button @click="fill">Fill OTP</button>
    
    <vue3-otp-input
      ref="otpInput"
      :num-inputs="4"
      v-model:value="bindValue"
      @on-change="(val) => console.log('changed', val)"
      @on-complete="(val) => console.log('complete', val)"
    />
  </div>
</template>

```

## Summary

- **Template refs** provide access to vue3-otp-input's internal methods when typed as `InstanceType<typeof VOtpInput>`.
- The component exposes **`clearInput()`** to reset all fields and **`fillInput(value)`** to programmatically set values.
- Both methods are defined in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue) and made available via `defineExpose`.
- When calling `fillInput()`, ensure the string length matches the `numInputs` prop exactly.

## Frequently Asked Questions

### What methods does vue3-otp-input expose via template ref?

The component exposes two methods: `clearInput()` which resets all OTP fields to empty strings and returns focus to the first input, and `fillInput(value: string)` which programmatically fills the fields when the provided string length matches the `numInputs` prop. These are defined in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue) using Vue 3's `defineExpose` API.

### How do I type the template ref for vue3-otp-input in TypeScript?

Type the ref as `InstanceType<typeof VOtpInput>` where `VOtpInput` is the imported component. For example: `const otpInput = ref<InstanceType<typeof VOtpInput> | null>(null);`. This provides full TypeScript intellisense for the `clearInput` and `fillInput` methods when accessing `otpInput.value`.

### Can I call fillInput with a value shorter than numInputs?

No, the `fillInput` method validates that the input string length exactly matches the `numInputs` prop. If the lengths do not match, the method returns early without updating the OTP fields. Ensure your fill value contains the same number of characters as the configured input fields.

### Is defineExpose required for accessing component methods in Vue 3?

Yes, in Vue 3's Composition API, child component methods are not automatically exposed to parent components. The vue3-otp-input component explicitly calls `defineExpose({ clearInput, fillInput })` in its setup function to make these methods available on template refs, as seen in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue) lines 13-16.