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

> Configure conditional classes for individual OTP input fields in vue3-otp-input using the conditionalClass prop. Apply unique styling to each input cell with this powerful feature. Learn how now.

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

---

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

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

```

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

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

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

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

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

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