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

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 and 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, 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 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:

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

This implementation in 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:

npm install vue3-otp-input

Then implement the component in your template:

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

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