Form Pin

>= v1.5

Form pin component.

Form Pin, Personalization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->form('pin')
    ->block('block', 'classes');

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v3.

# Concept

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.

# Basic Usage

<x-pin length="5" />

The length is mandatory in any use case.

# Label & Hint

Insert the code

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

# Prefix

An option to prefix a character related to the desired short code format.

<x-pin prefix="G-" length="5" />

# Clear

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.

# Masks

An option to limit the input types.

Only Numbers

Only Letters

<x-pin length="5" label="Only Numbers" numbers />
 
<x-pin length="5" label="Only Letters" letters />

# Events

Filled Event

Clear Event

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

# Invalidate

An option to not show validation error message.

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