Form Pin

Form pin component.

Form Pin, Personalization Blocks

Example:

TallStackUi::personalize()
    ->form('pin')
    ->block('block', 'classes');

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

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