Basic
A 6-digit segmented code input with auto-advance.
<div class="flex w-full items-center justify-center">
<x-components.otp :length="6" />
</div>
OTP Input
x-otp
A segmented one-time-code input with auto-advance, backspace and arrow-key navigation, and paste-to-fill. Works with wire:model or a plain form field, and can fire an event when complete.
php artisan components:add otp
Live — running in a real Laravel app in your browser
Live preview unavailable right now — showing the server render.
Examples
Pre-filled
Start with a value already filled in.
<div class="flex w-full items-center justify-center">
<x-components.otp :length="4" value="1234" />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
length
|
text |
6
|
Number of code digits. |
name
|
text |
—
|
Name for a hidden input, for plain form submission. |
value
|
text |
—
|
Initial code to pre-fill the boxes. |
autofocus
|
boolean |
false
|
Focus the first box on load. |
eventCallback
|
text |
—
|
Window event name dispatched (with { detail: { code } }) once every box is filled. |