OTP Input

A one-time password input component for Laravel applications. Individual digit inputs for verification codes. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/otp-input

Livewire Usage

Basic Usage

<livewire:sb-otp-input wire:model="code" />

Custom Length

<livewire:sb-otp-input wire:model="code" :length="4" />

Livewire Props

Vue 3 Usage

Setup

import { SbOtpInput } from './vendor/sb-otp-input';
app.component('SbOtpInput', SbOtpInput);

Basic Usage

<template>
  <SbOtpInput v-model="code" @complete="handleComplete" />
</template>

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

const code = ref('');

const handleComplete = (otp) => {
  console.log('OTP entered:', otp);
  verifyCode(otp);
};
</script>

4-Digit PIN

<template>
  <div class="text-center">
    <h2 class="text-xl font-bold mb-4">Enter PIN</h2>
    <SbOtpInput
      v-model="pin"
      :length="4"
      @complete="verifyPin"
    />
  </div>
</template>

Verification Form Example

<template>
  <div class="max-w-md mx-auto p-8 bg-white rounded-lg shadow">
    <h2 class="text-2xl font-bold text-center mb-2">Verification</h2>
    <p class="text-gray-600 text-center mb-6">
      Enter the 6-digit code sent to your phone
    </p>

    <SbOtpInput
      v-model="code"
      @complete="verify"
      input-class="border-blue-300"
    />

    <p v-if="error" class="text-red-500 text-center mt-4">{{ error }}</p>

    <button
      @click="resend"
      class="w-full mt-6 text-blue-600 hover:underline text-sm"
    >
      Didn't receive code? Resend
    </button>
  </div>
</template>

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

const code = ref('');
const error = ref('');

const verify = async (otp) => {
  try {
    await api.verifyOTP(otp);
    // Redirect on success
  } catch (e) {
    error.value = 'Invalid code. Please try again.';
    code.value = '';
  }
};

const resend = async () => {
  await api.resendOTP();
  error.value = '';
};
</script>

Vue Props

Events

Keyboard Behavior

Features

• Auto-Advance: Focus moves to next input automatically
• Paste Support: Paste full code to auto-fill
• Backspace Navigation: Goes to previous on empty backspace
• Arrow Keys: Navigate between inputs
• Numeric Only: Filters non-numeric characters
• Auto-Select: Selects digit on focus
• Complete Event: Fires when all digits entered

Styling

Uses Tailwind CSS:

• Large centered digits
• Focus ring highlight
• Equal-width inputs
• Customizable border color

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License