Verification code
Shows a separate box for each digit of a one-time code sent by SMS or email. The boxes accept digits only; a pasted code is spread across the boxes automatically.
Basic usage
By default 6 boxes are shown. When a digit is typed, focus moves to the next box, and Backspace in an empty box goes back to the previous one; non-digit characters such as letters do not stay in the box. When a code is pasted, the digits fill the boxes in order and focus moves to the box after the last digit. The first box has autocomplete="one-time-code", so phones can suggest the SMS code automatically. Screen readers announce each box as "Digit 1 of 6", "Digit 2 of 6".
<acun:input-otp label="Code sent by SMS" />| Prop | Values |
|---|---|
label | Label above the boxes |
Number of digits
length sets the number of boxes. The name of the hidden field the code is submitted with is changed with name; if omitted, the name of the wire:model property is used, or code if that is missing too. You can give an initial code with value.
<acun:input-otp :length="4" name="pin" label="4-digit PIN" />| Prop | Values |
|---|---|
length | 6 (default) |
name | wire:model name or code |
value | Initial code |
In a form and with Livewire
In a classic form, the digits in the boxes are joined and submitted with a hidden field. wire:model is two-way: the typed code is written to the property, and a code set by the server ($this->code = '482615', reset()) is spread across the boxes. The hidden field takes part in the form's change tracking; the boxes themselves do not count. Other attributes such as wire:key and class are added to the outer container. The component does not show validation errors itself; add the message below it with @error.
{{-- Classic form: the code is submitted as "code" --}}
<form method="POST" action="{{ route('verification.check') }}">
@csrf
<acun:input-otp label="Verification code" />
<acun:button type="submit" class="mt-4 w-full">Verify</acun:button>
</form>
{{-- Livewire --}}
<acun:input-otp wire:model="code" label="Verification code" />
@error('code')
<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror| Prop | Values |
|---|---|
wire:model | The joined code; two-way |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
length | 6 | Number of boxes (digits) |
name | null | Name of the hidden field the code is submitted with; otherwise the wire:model name, or code if that is missing too |
label | null | Label above the boxes |
value | null | Initial code (without wire:model / x-model); non-digit characters are dropped |
wire:model / x-model | — | Two-way: a code coming from the server is spread across the boxes |