How to Disable All OTP Input Fields Using the `isDisabled` Prop in Vue 3

Set the is-disabled prop to true on the <v-otp-input> component to disable every input field simultaneously, blocking both native input and keyboard navigation.

The vue3-otp-input library provides a composable OTP component system that allows you to control the state of all inputs through a single boolean prop. By understanding how the wrapper and individual input components interact, you can implement disabled states for form validation, loading indicators, or security requirements.

Understanding the Component Architecture

The OTP input system consists of two coordinated components that work together to propagate the disabled state from parent to child.

The Wrapper Component (vue3-otp-input.vue)

The main component declared in src/components/vue3-otp-input.vue acts as the orchestrator. It defines the isDisabled prop with a default value of false:

// src/components/vue3-otp-input.vue (lines 28-31)
props: {
  isDisabled: {
    type: Boolean,
    default: false
  },
  // ...
}

The wrapper then forwards this value to every child SingleOtpInput instance via template binding:

// src/components/vue3-otp-input.vue (lines 41-44)
<single-otp-input
  v-for="(item, i) in numInputs"
  :key="i"
  :is-disabled="isDisabled"
  // ...
/>

The Individual Input (single-otp-input.vue)

Each digit input is rendered by src/components/single-otp-input.vue, which also declares its own isDisabled prop:

// src/components/single-otp-input.vue (lines 24-27)
props: {
  isDisabled: {
    type: Boolean,
    default: false
  },
  // ...
}

The component applies this to the native HTML input element:

// src/components/single-otp-input.vue (lines 46-48)
<input
  :disabled="isDisabled"
  // ...
/>

Additionally, keyboard event handlers check this prop to prevent navigation between fields when disabled:

// src/components/single-otp-input.vue (lines 72-76)
handleKeyDown(event) {
  if (this.isDisabled) {
    event.preventDefault();
    return;
  }
  // ...
}

Implementing the isDisabled Prop

You can bind the disabled state using several common Vue 3 patterns.

Hard-Coded Disabling

For static states where the input should always be disabled (e.g., during a loading screen):

<template>
  <v-otp-input
    :num-inputs="4"
    :is-disabled="true"
  />
</template>

Reactive Disabling via Checkbox

For dynamic control, bind the prop to a reactive reference:

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

const disabled = ref(false);
</script>

<template>
  <label>
    <input type="checkbox" v-model="disabled" />
    Disable OTP fields
  </label>

  <v-otp-input
    :num-inputs="6"
    :is-disabled="disabled"
  />
</template>

Programmatic Toggle Using Component Reference

Access the component instance to toggle state from methods:

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

const otpRef = ref<InstanceType<typeof VOtpInput> | null>(null);
const disabled = ref(false);

function toggleDisabled() {
  disabled.value = !disabled.value;
}
</script>

<template>
  <button @click="toggleDisabled">Toggle disabled state</button>

  <v-otp-input
    ref="otpRef"
    :num-inputs="5"
    :is-disabled="disabled"
  />
</template>

How It Works Under the Hood

When you set :is-disabled="true", Vue's reactivity system triggers an update in the wrapper component (vue3-otp-input.vue). The wrapper iterates through its numInputs loop and passes the new boolean value to each SingleOtpInput child.

The child components receive the updated prop and bind it to the native disabled attribute of the HTML input element. This prevents user interaction, removes the element from the tab order, and applies default browser styling for disabled inputs. Additionally, the keyboard navigation logic in single-otp-input.vue checks the isDisabled prop before processing arrow keys or backspace events, ensuring that disabled fields cannot be modified even through keyboard shortcuts.

Summary

• The is-disabled prop is defined in src/components/vue3-otp-input.vue and defaults to false.
• The wrapper forwards this value to every child SingleOtpInput component automatically.
• Each input binds the prop to the native HTML disabled attribute and blocks keyboard events when true.
• Bind the prop to a reactive reference for dynamic control, or hard-code true for static disabling.

Frequently Asked Questions

What happens to keyboard navigation when isDisabled is set to true?

When the isDisabled prop is true, the handleKeyDown method in src/components/single-otp-input.vue immediately calls event.preventDefault() and returns early. This blocks arrow key navigation between fields, backspace deletion, and any other keyboard interactions, ensuring the disabled state is strictly enforced even for power users who navigate via keyboard.

Can I disable individual OTP inputs instead of all fields at once?

The current architecture in vue3-otp-input does not support disabling individual slots independently. The isDisabled prop is passed uniformly to all SingleOtpInput children in the wrapper's render loop. To disable specific inputs, you would need to fork the component and modify the prop logic to accept an array of booleans or indices, or implement separate OTP input instances for the enabled and disabled sections.

Does setting isDisabled affect the v-model binding or existing values?

Setting isDisabled to true does not clear or modify the underlying value bound to v-model. The data remains in the component state; only the UI presentation changes to prevent new user input. When the prop is toggled back to false, the inputs become interactive again and retain any previously entered digits. This behavior aligns with standard HTML disabled input semantics.

How do I programmatically toggle the disabled state from a parent component?

Create a reactive reference using Vue's ref and bind it to the is-disabled prop. Expose a method that toggles this boolean value. If you need to trigger the change from outside the component, you can also assign a template ref to the v-otp-input instance and modify the bound reactive data from the parent scope, as shown in the programmatic toggle example above.

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