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

> Easily disable all OTP input fields in Vue 3 by setting the isDisabled prop to true on the v-otp-input component. Learn how to block input and keyboard navigation.

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

---

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

The main component declared in [`src/components/vue3-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/vue3-otp-input.vue) acts as the orchestrator. It defines the `isDisabled` prop with a default value of `false`:

```vue
// 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:

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

Each digit input is rendered by [`src/components/single-otp-input.vue`](https://github.com/ejirocodes/vue3-otp-input/blob/main/src/components/single-otp-input.vue), which also declares its own `isDisabled` prop:

```vue
// 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:

```vue
// 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:

```javascript
// 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):

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

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

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