How to Configure Conditional Classes Based on Input Index in vue3-otp-input

Use the conditionalClass prop to pass an array of strings where each index corresponds to a specific OTP input field, allowing you to apply unique styling to individual cells.

The vue3-otp-input component from ejirocodes/vue3-otp-input provides a flexible API for styling individual OTP input fields based on their position. By leveraging the conditionalClass prop, you can configure conditional classes based on input index in vue3-otp-input to highlight specific digits, indicate validation errors, or create visual grouping effects.

Understanding the conditionalClass Prop Architecture

The implementation spans two core components. In src/components/vue3-otp-input.vue, the parent declares conditionalClass as an optional array of strings and forwards the appropriate class to each child based on the current index i in the v-for loop.

Parent Component (vue3-otp-input.vue)

The prop is defined with a default empty array factory:

// src/components/vue3-otp-input.vue
conditionalClass?: string[]
// Default: () => []

During rendering, the template extracts the class for the current index:

<SingleOtpInput
  v-for="(item, i) in numInputs"
  :conditionalClass="conditionalClass?.[i]"
  ...
/>

Child Component (single-otp-input.vue)

The child receives the single class string and merges it with global inputClasses and state-based classes:

<!-- src/components/single-otp-input.vue -->
<input
  :class="[inputClasses, conditionalClass, { 'is-complete': model }]"
/>

Implementing Index-Based Conditional Classes

To apply conditional classes based on input index in vue3-otp-input, pass an array where the position corresponds to the input field index (0-based).

Basic Array Usage

Provide a static array of class names to style specific positions:

<template>
  <vue3-otp-input
    :num-inputs="4"
    v-model:value="otp"
    :conditionalClass="['first', 'second', 'third', 'fourth']"
    input-classes="base-otp"
  />
</template>

<script setup>
import { ref } from 'vue';
const otp = ref('');
</script>

<style>
.base-otp { width: 40px; text-align: center; }
.first  { border-color: teal; }
.second { border-color: orange; }
.third  { border-color: purple; }
.fourth { border-color: green; }
</style>

Dynamic Error Highlighting

Compute the class array reactively to highlight specific indices based on validation state:

<script setup>
import { ref, computed } from 'vue';

const otp = ref('');
const errorIndex = ref(2); // Third input has error

const conditionalClasses = computed(() => 
  Array.from({ length: 4 }, (_, i) => 
    i === errorIndex.value ? 'error' : ''
  )
);
</script>

<template>
  <vue3-otp-input
    :num-inputs="4"
    v-model:value="otp"
    :conditionalClass="conditionalClasses"
    input-classes="base-otp"
  />
</template>

<style>
.error { border: 2px solid red; background-color: #fee; }
</style>

Combining Global and Conditional Classes

Merge base styling with index-specific overrides:

<vue3-otp-input
  :num-inputs="3"
  v-model:value="otp"
  input-classes="global-style"
  :conditionalClass="['highlight', '', 'highlight']"
/>

All inputs receive .global-style, while the first and third inputs additionally receive .highlight.

Summary

• The conditionalClass prop accepts an array of strings where each element maps to an input field by index.
• In src/components/vue3-otp-input.vue, the component extracts conditionalClass?.[i] for each index i in the v-for loop.
• The child component src/components/single-otp-input.vue merges this class with inputClasses and state-based classes.
• Use static arrays for fixed styling or computed properties for dynamic validation feedback.
• Empty strings in the array safely skip styling for specific indices without breaking the class binding.

Frequently Asked Questions

What happens if the conditionalClass array is shorter than numInputs?

If the array contains fewer elements than the number of inputs, indices without a corresponding entry receive undefined, which Vue’s class binding treats as a falsy value. No extra class is applied to those inputs, and the component continues to function normally without errors.

Can I use conditionalClass with TypeScript?

Yes. The prop is typed as string[] in the component’s interface. When using TypeScript with Vue 3, ensure your array is explicitly typed as string[] or Array<string> to satisfy the prop validator and provide IntelliSense in your IDE.

How do I highlight only the active or focused input?

The component does not expose a specific conditionalClass entry for focus state. Instead, use the global inputClasses prop combined with CSS pseudo-classes like :focus or :focus-visible. For index-specific highlighting based on focus, you would need to track the active index externally and dynamically update the conditionalClass array using a computed property.

Is there a performance impact when using large conditionalClass arrays?

No significant performance impact occurs because the array is only referenced during the render cycle to extract the string at the current index. The operation is O(1) per input. However, avoid creating new array instances on every render (e.g., inline array literals in the template) to prevent unnecessary Vue reactivity triggers; instead, use a stable reference or computed property.

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