Verify Code Input

The Verify Code Input component provides a multi-field verification code input with automatic navigation, paste support, and optional auto-verification. It displays individual input fields for each code character and handles keyboard navigation seamlessly.

Basic usage

Bind a string with v-model. The component automatically splits the value into individual input fields based on the length prop.

Value:

Source code

<template>
  <div class="ik-mb-4">
    <IkVerifyCodeInput v-model="code" :length="4" />
  </div>
  <p class="ik-text--sm ik-text--default-regular">Value: {{ code }}</p>
</template>
<script setup>
import { IkVerifyCodeInput } from '@ikol/ui-kit/components/IkVerifyCodeInput';
import { ref } from 'vue';

const code = ref('');
</script>

Custom length

Use the length prop to control the number of input fields. The default is 4.

Source code

<template>
  <div>
    <IkVerifyCodeInput v-model="code8" :length="8" />
  </div>
</template>
<script setup>
import { IkVerifyCodeInput } from '@ikol/ui-kit/components/IkVerifyCodeInput';
import { ref } from 'vue';

const code8 = ref('');
</script>

Auto-verification

Provide an on_complete callback function that returns a Promise with a verified boolean. The component will automatically call this function when all fields are filled, showing loading and success/fail states.

Source code

<template>
  <div>
    <IkVerifyCodeInput
      v-model="verifyCode"
      :length="4"
      :on_complete="verifyCodeCallback"
      class="ik-mb-4"
    />
    <p v-if="message" class="ik-text--sm" :class="messageClass">{{ message }}</p>
  </div>
</template>
<script setup>
import { IkVerifyCodeInput } from '@ikol/ui-kit/components/IkVerifyCodeInput';
import { ref } from 'vue';

const verifyCode = ref('');
const message = ref('');
const messageClass = ref('');

const verifyCodeCallback = (code) => {
  return new Promise((resolve) => {
    // Simulate API call
    setTimeout(() => {
      const isValid = code === '1234';
      message.value = isValid ? 'Verification successful!' : 'Invalid code. Try 1234';
      messageClass.value = isValid ? 'ik-text--success' : 'ik-text--error';
      resolve({ verified: isValid });
    }, 50);
  });
};
</script>

Paste support

The component automatically handles paste operations. When you paste multiple characters, they will be distributed across the input fields starting from the focused field.

Try pasting: 123456

Value:

Source code

<template>
  <div class="ik-mb-4">
    <IkVerifyCodeInput v-model="pasteCode" :length="6" />
  </div>
  <p class="ik-text--sm ik-text--default-light">Try pasting: 123456</p>
  <p class="ik-text--sm ik-text--default-regular">Value: {{ pasteCode }}</p>
</template>
<script setup>
import { IkVerifyCodeInput } from '@ikol/ui-kit/components/IkVerifyCodeInput';
import { ref } from 'vue';

const pasteCode = ref('');
</script>

Disabled state

Use the disabled prop to prevent user interaction with all input fields.

Source code

<template>
  <IkVerifyCodeInput v-model="disabledCode" :length="4" disabled class="ik-mb-4" />
</template>
<script setup>
import { IkVerifyCodeInput } from '@ikol/ui-kit/components/IkVerifyCodeInput';
import { ref } from 'vue';

const disabledCode = ref('1234');
</script>

Fail state behavior

When verification fails, clicking on any input field will clear all fields and reset the verification state, allowing the user to try again.

Complete the code, then click on any field to reset

Source code

<template>
  <div>
    <IkVerifyCodeInput
      v-model="failCode"
      :length="4"
      :on_complete="alwaysFail"
      class="ik-mb-4"
    />
    <p class="ik-text--sm ik-text--default-light">
      Complete the code, then click on any field to reset
    </p>
  </div>
</template>
<script setup>
import { IkVerifyCodeInput } from '@ikol/ui-kit/components/IkVerifyCodeInput';
import { ref } from 'vue';

const failCode = ref('');

const alwaysFail = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ verified: false });
    }, 500);
  });
};
</script>