Form Pin
Form pin component.
Form Pin, Customization Blocks
<x-pin length="5" /><x-pin length="5" label="Insert the code" hint="We sent a 5-digit code to your email." /><x-pin name="pin-readonly" length="5" label="Readonly" value="12345" readonly /><x-pin name="pin-disabled" length="5" label="Disabled" value="12345" disabled />An option to prefix a character related to the desired short code format.
<x-pin prefix="G-" length="5" />An option to append a clear button.
<x-pin length="5" clear />An option to limit the input types.
<x-pin length="5" label="Only Numbers" numbers /> <x-pin length="5" label="Only Letters" letters />
#
Password
NEW
An option to mask the typed characters.
<x-pin length="6" numbers password />
#
Separator
NEW
An option to draw a visual divider between the boxes. The divider never reaches the value.
<!-- Cuts in the middle when split is omitted: 123-456 --><x-pin length="6" numbers separator /> <!-- Custom character and a single split: 12/3456 --><x-pin length="6" numbers separator="/" split="2" /> <!-- Several splits: AB-CD-EF-GH --><x-pin length="8" letters separator split="2,4,6" />A bare separator uses - and cuts the boxes in the middle. Pass a string of up to three characters to replace it, and split to choose the positions: 2 gives 12-3456 , 2,4,6 or [2, 4, 6] gives 12-34-56-78 .
#
Group
NEW
An option to join the boxes with shared borders.
<x-pin length="6" numbers group /> <!-- Each chunk becomes its own group: [123]-[456] --><x-pin length="6" numbers group separator /><x-pin length="5" x-on:filled="alert(`Filled: ${$event.detail.model}`)" /> <x-pin length="5" clear x-on:clear="alert(`Cleared: ${$event.detail.model}`)" />An option to automatically submit the form when all pin boxes are filled.
<!-- Livewire string property: $pin --> <form wire:submit="verify"> <x-pin length="5" wire:model.live="pin" label="Enter your code" smart numbers /></form>