New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Form Pin

>= v1.5

Form pin component.

Many modern applications need to validate and authorize things such as user registration or even login, through mechanisms such as 2FA. Pin input is an ideal component for situations where you need to request a pin (short code) from the user. Starting from version 1.5.3, the pin component has a behavior to forces typing to start from the first entry, following the logic of the component.
<x-pin length="5" />

The length is mandatory in any use case.

We sent a 5-digit code to your email.
<x-pin length="5"
label="Insert the code"
hint="We sent a 5-digit code to your email." />

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 />

The clear button will only be displayed when the input is not empty.

An option to limit the input types.

<x-pin length="5" label="Only Numbers" numbers />
<x-pin length="5" label="Only Letters" letters />
<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}`)" />

The clear event needs the clear option to be enabled.

An option to not show validation error message.

<x-pin length="5" invalidate />

Code highlighting provided by Torchlight