Input OTP

[ProgrammerZ]

Would be nice to have OTP, PIN input some day.

[Suven]

I agree this would be cool as built-in thing. In the meantime, if anybody else is in the need, I created this which autofocuses the next input when something is inserted:

<?php
 
use Livewire\Volt\Component;
use Livewire\Attributes\Modelable;
 
new class extends Component {
    #[Modelable]
    public string $code = '';

    public string $dig_1 = '';
    public string $dig_2 = '';
    public string $dig_3 = '';
    public string $dig_4 = '';
    public string $dig_5 = '';
    public string $dig_6 = '';

    public function updated()
    {
        $this->code = $this->dig_1 . $this->dig_2 . $this->dig_3 . $this->dig_4 . $this->dig_5 . $this->dig_6;
    }
} ?>

<div x-data="{ currentIndex: 0, shiftFocus(index, event) {
    if (['1','2','3','4','5','6','7','8','9','0'].includes(event.key)) {
        $el.querySelector(`input[name='dig_${index}']`).value = '';
        $nextTick(() => {
            $wire.$refresh();
            $el.querySelector(`input[name='dig_${index + 1}']`)?.focus()
        });
        return;
    }
    if (event.key === 'Backspace' && index > 1) {
        $nextTick(() => {
            $wire.$refresh();
            $el.querySelector(`input[name='dig_${index - 1}']`).value = '';
            $el.querySelector(`input[name='dig_${index - 1}']`).focus();
        });
        return;
    }
    event.preventDefault();
} }" class="flex gap-2">
    <flux:input wire:model="dig_1" class:input="text-center" @keydown="shiftFocus(1, $event)" type="text" maxlength="1" name="dig_1" required autofocus  />
    <flux:input wire:model="dig_2" class:input="text-center" @keydown="shiftFocus(2, $event)" type="text" maxlength="1" name="dig_2" required />
    <flux:input wire:model="dig_3" class:input="text-center" @keydown="shiftFocus(3, $event)" type="text" maxlength="1" name="dig_3" required  />
    <flux:input wire:model="dig_4" class:input="text-center" @keydown="shiftFocus(4, $event)" type="text" maxlength="1" name="dig_4" required />
    <flux:input wire:model="dig_5" class:input="text-center" @keydown="shiftFocus(5, $event)" type="text" maxlength="1" name="dig_5" required />
    <flux:input wire:model="dig_6" class:input="text-center" @keydown="shiftFocus(6, $event)" type="text" maxlength="1" name="dig_6" required />
</div>