OTP
One Time Password input component for multi-digit verification codes
Basic Usage
The most basic OTP component with 4 digits by default:
<neura::otp name="code" />Different Lengths
Specify the number of digits with the length attribute:
4 Digits (Default)
6 Digits
8 Digits
<neura::otp name="code" :length="4" />
<neura::otp name="code" :length="6" />
<neura::otp name="code" :length="8" />With Livewire
Use wire:model to sync with Livewire:
<neura::otp wire:model="otpCode" :length="6" />
<!-- In your Livewire component -->
public $otpCode = '';With Separators
Add separators between digits for better readability:
<neura::otp name="code" :length="6">
<neura::otp.input />
<neura::otp.input />
<neura::otp.separator />
<neura::otp.input />
<neura::otp.input />
<neura::otp.separator />
<neura::otp.input />
<neura::otp.input />
</neura::otp>Custom Pattern
Customize the allowed pattern for inputs (by default: numbers only):
Numbers Only (Default)
Alphanumeric
<!-- Numbers only (default) -->
<neura::otp name="code" allowedPattern="[0-9]" />
<!-- Alphanumeric -->
<neura::otp name="code" allowedPattern="[A-Za-z0-9]" />Input Type
Choose the input type (text by default, or password to hide characters):
Text (Default)
Password
<neura::otp name="code" type="text" :length="4" />
<neura::otp name="code" type="password" :length="4" />Autofocus
Enable autofocus so the first input is automatically focused:
<neura::otp name="code" :length="6" :autofocus="true" />Use Cases
Two-Factor Authentication
Enter 2FA Code
Enter the 6-digit code from your authenticator app
Email Verification
Verify Email
We sent a verification code to your email. Please enter it below.
Best Practices
✓ Do
- Use 4-6 digits for most use cases
- Enable autofocus to improve user experience
- Use separators for long codes (6+ digits) to improve readability
- Use password type to hide sensitive codes
- Integrate with Livewire for server-side validation
✗ Don't
- Don't use too many digits (max 8 recommended)
- Don't forget to validate the code on the server side
- Don't use overly permissive patterns that could cause errors
- Don't disable autofocus unless necessary
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| name | string|null | null | Field name (automatically detected from wire:model or x-model) |
| length | int | 4 | Number of digits in the OTP code |
| type | string | 'text' | HTML input type. Values: 'text', 'password' |
| allowedPattern | string | '[0-9]' | Allowed regex pattern for each input (e.g., '[0-9]', '[A-Za-z0-9]') |
| autofocus | bool | false | Enable autofocus on the first empty input |