maryUI

Pin

Default

The default behavior accept any character. 

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

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>
maryUI
Sponsor