# How to Implement OTP Input with Auto-Focus on Page Load in Vue 3

> Learn how to implement OTP input with auto-focus in Vue 3. Set shouldAutoFocus to true on the vue3-otp-input component for seamless user experience on page load.

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

---

**Set the `shouldAutoFocus` prop to `true` on the `<vue3-otp-input>` component to automatically focus the first input field when the page loads, leveraging the `onMounted` hook in the underlying `SingleOtpInput` component.**

The `ejirocodes/vue3-otp-input` repository provides a reusable OTP input component for Vue 3 applications built with the Composition API. Implementing auto-focus behavior requires understanding how the parent component coordinates with individual input cells through specific props and lifecycle hooks. This guide explains the exact mechanism used in [`src/components/single-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/single-otp-input.vue) and [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue) to achieve immediate cursor placement on page load.

## How the Auto-Focus Mechanism Works

The auto-focus functionality relies on three coordinated parts within the vue3-otp-input architecture.

### The `shouldAutoFocus` Prop

In [`src/components/single-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/single-otp-input.vue), the component accepts a **boolean `shouldAutoFocus` prop** that defaults to `false`. When set to `true` via the parent component, it signals that the input should attempt to capture focus when mounted.

### Tracking the Active Input Index

The parent component in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue) maintains an `activeInput` index to track which OTP cell currently receives user input. It passes a **boolean `focus` prop** to each `SingleOtpInput` child, setting `focus: true` only for the input at the active index. By default, the first input (index 0) receives this flag on initial render.

### The `onMounted` Focus Logic

The actual focus execution occurs inside the `SingleOtpInput` component's `onMounted` hook. The code checks both `props.focus` and `props.shouldAutoFocus` before calling native DOM methods:

```typescript
onMounted(() => {
  if (input.value && props.focus && props.shouldAutoFocus) {
    input.value.focus()
    input.value.select()
  }
})

```

This implementation in [`src/components/single-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/single-otp-input.vue) ensures that only the first input box meets both conditions simultaneously, receiving immediate focus and text selection when the page loads.

## Complete Implementation Example

To enable auto-focus in your Vue 3 application, install the package and bind the `should-auto-focus` attribute:

```bash
npm install vue3-otp-input

```

Then implement the component in your template:

```vue
<!-- App.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import Vue3OtpInput from "vue3-otp-input"

const otp = ref("")
</script>

<template>
  <vue3-otp-input
    v-model:value="otp"
    :num-inputs="6"
    :should-auto-focus="true"
    :should-focus-order="true"
    input-classes="otp-box"
  />
</template>

<style>
.otp-box {
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  text-align: center;
  margin: 0 4px;
  border: 2px solid #ccc;
  border-radius: 4px;
}
</style>

```

Setting `:should-auto-focus="true"` propagates the flag to all child inputs, but only the first input—where `focus` equals `true`—executes the DOM `focus()` and `select()` methods on mount.

## Summary

- The **auto-focus feature** requires setting `shouldAutoFocus` to `true` on the `<vue3-otp-input>` component.
- The parent component tracks the active input index and passes a `focus` prop to identify which cell should receive focus.
- The `onMounted` hook in [`src/components/single-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/single-otp-input.vue) executes `input.value.focus()` and `input.value.select()` only when both `focus` and `shouldAutoFocus` are true.
- This architecture ensures only the first OTP input captures focus automatically, creating a seamless user experience on page load.

## Frequently Asked Questions

### Can I disable auto-focus on mobile devices while keeping it on desktop?

The vue3-otp-input component does not provide a built-in device detection feature for conditional auto-focusing. You would need to implement platform detection logic in your parent component and conditionally bind the `:should-auto-focus` prop based on the user agent or screen size.

### Why does the first input not focus when I set `shouldAutoFocus` to true?

Ensure you are using the correct prop syntax `:should-auto-focus="true"` (kebab-case in template, camelCase in script). Also verify that no other element on your page is stealing focus immediately after mount through competing `autofocus` attributes or JavaScript focus calls.

### How do I programmatically shift focus to the next input after typing?

The component handles focus transitions automatically when you enable `:should-focus-order="true"`. The parent component in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue) manages the `activeInput` index and updates the `focus` prop for child components as users type or delete characters.

### Does the auto-focus feature select existing text in the input?

Yes. When the conditions are met in the `onMounted` hook, the code calls both `input.value.focus()` and `input.value.select()`, which places the cursor in the input and selects any existing content, ready for immediate replacement.