blatui

Components

Input OTP

Accessible one-time password component with copy-paste functionality.

php artisan blatui:add input-otp 
<x-ui.input-otp :maxlength="6">
    <x-ui.input-otp-group>
        <x-ui.input-otp-slot :index="0" />
        <x-ui.input-otp-slot :index="1" />
        <x-ui.input-otp-slot :index="2" />
        <x-ui.input-otp-slot :index="3" />
        <x-ui.input-otp-slot :index="4" />
        <x-ui.input-otp-slot :index="5" />
    </x-ui.input-otp-group>
</x-ui.input-otp>

Alphanumeric

{{-- Accepts letters and digits (alphanumeric) instead of digits only. --}}
<x-ui.input-otp :maxlength="6" alphanumeric>
    <x-ui.input-otp-group>
        <x-ui.input-otp-slot :index="0" />
        <x-ui.input-otp-slot :index="1" />
        <x-ui.input-otp-slot :index="2" />
        <x-ui.input-otp-slot :index="3" />
        <x-ui.input-otp-slot :index="4" />
        <x-ui.input-otp-slot :index="5" />
    </x-ui.input-otp-group>
</x-ui.input-otp>

Disabled

<x-ui.input-otp :maxlength="6" disabled>
    <x-ui.input-otp-group>
        <x-ui.input-otp-slot :index="0" />
        <x-ui.input-otp-slot :index="1" />
        <x-ui.input-otp-slot :index="2" />
        <x-ui.input-otp-slot :index="3" />
        <x-ui.input-otp-slot :index="4" />
        <x-ui.input-otp-slot :index="5" />
    </x-ui.input-otp-group>
</x-ui.input-otp>

Four Digit

<x-ui.input-otp :maxlength="4">
    <x-ui.input-otp-group>
        <x-ui.input-otp-slot :index="0" />
        <x-ui.input-otp-slot :index="1" />
        <x-ui.input-otp-slot :index="2" />
        <x-ui.input-otp-slot :index="3" />
    </x-ui.input-otp-group>
</x-ui.input-otp>

With Separator

<x-ui.input-otp :maxlength="6">
    <x-ui.input-otp-group>
        <x-ui.input-otp-slot :index="0" />
        <x-ui.input-otp-slot :index="1" />
        <x-ui.input-otp-slot :index="2" />
    </x-ui.input-otp-group>
    <x-ui.input-otp-separator />
    <x-ui.input-otp-group>
        <x-ui.input-otp-slot :index="3" />
        <x-ui.input-otp-slot :index="4" />
        <x-ui.input-otp-slot :index="5" />
    </x-ui.input-otp-group>
</x-ui.input-otp>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php 
use Livewire\Component;

class Demo extends Component
{
    public string $code = '';

    public function render()
    {
        return view('livewire.demo');
    }
}
resources/views/livewire/demo.blade.php 
<x-ui.input-otp wire:model="code" />

API Reference

Props, slots and exposed methods for <x-ui.input-otp>.

Props

Prop Type Default Description
name string — Name of the hidden input, so the entered code is submitted with the form.
maxlength int 6 Total number of characters the code accepts. Should match the number of input-otp-slot children you render.
value string '' Initial code value.
disabled bool false Disables the field and dims it.
alphanumeric bool false Accept letters and digits (text inputmode). When false the field is numeric-only.
ariaLabel string 'One-time password' Accessible label announced for the code field.

Slots

Slot Description
default The visible slot cells. Compose with x-ui.input-otp-group wrapping x-ui.input-otp-slot (each given an :index), optionally split by x-ui.input-otp-separator. The real input is hidden and overlays these cells.