Laravel OTP Input Component
ProOne-time password input with auto-focus, paste support, and configurable length for verification codes.
A OTP Input built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag:
<x-aura::otp-input>
Installation
composer require bluestarsystem/aura-uiThe OTP Input is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →
Usage
<x-aura::otp-input
name="otp_code"
wire:model="otpCode"
/>See the full API, props and live examples in the OTP Input documentation.
Overview
The OTP Input component renders a series of individual input fields for entering one-time passwords or verification codes. It automatically moves focus to the next field as digits are entered, supports pasting full codes, and handles backspace navigation. Integrates with Livewire via wire:model for server-side verification.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
length |
int |
6 |
Number of input fields (digits in the code). |
type |
string |
'number' |
Input type: number for numeric-only, text for alphanumeric codes. |
autofocus |
bool |
true |
Automatically focus the first input field on mount. |
Slots
| Slot | Description |
|---|---|
| default | Not used. The input fields are generated automatically based on the length prop. |
See more examples and every variant in the OTP Input documentation.