Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add otp

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Need alphanumeric or sized variants? The Pro OTP Input adds type variants and sizes.

Overview

The <x-aura::otp> component renders a row of individual single-digit input boxes for entering numeric verification codes. Focus automatically advances to the next box as each digit is typed, and a full code can be pasted directly. The bound value is the concatenated code string via wire:model.

Basic Usage

<x-aura::otp label="Verification Code" :length="6" />
<x-aura::otp
    label="Verification Code"
    :length="6"
    wire:model="otpCode"
/>

Props

Prop Type Default Description
label string|null null Label text displayed above the OTP boxes.
length int 6 Number of digit boxes. Minimum 1.
disabled bool false Disable all digit inputs.
error string|null null Error message displayed below the boxes, applying error styling.
hint string|null null Help text displayed below the boxes. Hidden when an error is present.

Variants / Examples

4-Digit PIN

<x-aura::otp label="PIN" :length="4" />
<x-aura::otp
    label="PIN"
    :length="4"
    wire:model="pin"
/>

With Error State

The code is invalid or has expired.

<x-aura::otp
    label="Enter Code"
    :length="6"
    error="The code is invalid or has expired."
/>
<x-aura::otp
    label="Enter Code"
    :length="6"
    error="The code is invalid or has expired."
    wire:model="otpCode"
/>

With Hint Text

Check your authenticator app for the current code.

<x-aura::otp
    label="Two-Factor Code"
    :length="6"
    hint="Check your authenticator app for the current code."
/>
<x-aura::otp
    label="Two-Factor Code"
    :length="6"
    hint="Check your authenticator app for the current code."
    wire:model="totpCode"
/>

Livewire 2FA Verification

<div class="max-w-sm mx-auto text-center">
    <h2 class="text-lg font-semibold mb-4">Verify Your Identity</h2>
    <p class="text-sm text-gray-500 mb-6">
        Enter the 6-digit code sent to your email.
    </p>

    <form wire:submit="verify">
        <x-aura::otp
            label="Verification Code"
            :length="6"
            wire:model="otpCode"
        />

        @error('otpCode')
            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
        @enderror

        <x-aura::button type="submit" class="mt-6 w-full" wire:loading.attr="disabled">
            Verify
        </x-aura::button>
    </form>
</div>

class VerifyEmail extends Component
{
    public string $otpCode = '';

    protected function rules(): array
    {
        return [
            'otpCode' => 'required|string|size:6|digits:6',
        ];
    }

    public function verify(): void
    {
        $this->validate();

        if (! auth()->user()->verifyEmailOtp($this->otpCode)) {
            $this->addError('otpCode', 'The code is invalid or has expired.');
            $this->reset('otpCode');
            return;
        }

        $this->redirect('/dashboard');
    }
}

Keyboard Navigation

Key Action
Any digit (0–9) Fill current box and advance focus
Backspace (empty box) Move focus to previous box
ArrowLeft Move focus to previous box
ArrowRight Move focus to next box
Paste Distribute digits across boxes from clipboard

Accessibility

  • Each individual input uses inputmode="numeric" to trigger a numeric keyboard on mobile.
  • The error prop adds a red border to all boxes via the aura-danger-500 border color.
  • Error messages are rendered in a <p> tag styled with the aura-input-error-text class.
  • All additional HTML attributes (including aria-*, id) are forwarded to the outer wrapper via Blade's attribute bag.
  • The disabled state applies the HTML disabled attribute to every digit input.