Docs running with Livewire 4 - Beta try it →
maryUI

Pin

Default 

<x-pin wire:model="pin1" size="3" />

Numeric

The numeric property modifies the behavior to accept only numbers. 

<x-pin wire:model="pin2" size="4" numeric />

Security

You can use any compatible text-secure HTML symbol.

<x-pin wire:model="pin1" size="3" hide />

<x-pin wire:model="pin1" size="3" hide hide-type="circle" />

<x-pin wire:model="pin1" size="3" hide hide-type="square" />

Events

The @completed and @incomplete events are triggered respectively when the pin is completed or is incomplete. 

<x-pin wire:model="pin3" size="5" @completed="$wire.show = true" @incomplete="$wire.show = false" />



<template x-if="$wire.show">

    <x-alert icon="o-check-circle" class="mt-5">

        You have typed : <span x-text="$wire.pin3"></span>

    </x-alert>

</template>

Spacing

You can remove the gap between the pins by using the no-gap property. 

<x-pin wire:model="pin3" size="5" no-gap />
Made with by Robson Tenório and contributors.