Skip to content
Alpine Zag

Pin Input

A pin input component that allows you to enter a sequence of digits or letters.

Zag.js Reference 
---


---


<div x-cloak x-data x-pin-input="{ blurOnComplete: true }">
  <label x-pin-input:label>Enter your verification code:</label>


  <div x-pin-input:control>
    <template x-for="i in 4">
      <input x-pin-input:input="i - 1" />
    </template>
  </div>


  <button data-part="clear-trigger" type="button" x-on:click="$pinInput.clearValue()">Clear</button>
</div>


<style>
  [data-part="root"] {
    @apply flex flex-col gap-1;
  }


  [data-part="label"] {
    @apply font-medium;
  }


  [data-part="control"] {
    @apply flex items-center gap-4 mb-1;
  }


  [data-part="input"] {
    @apply inline-flex justify-center items-center text-center w-10 h-10 rounded border bg-white text-zinc-700 outline-none focus:outline-zinc-500;
  }


  [data-part="clear-trigger"] {
    @apply inline-flex justify-center items-center gap-2 px-2.5 py-1 min-h-9 rounded border text-sm font-medium bg-white text-zinc-700 hover:bg-zinc-100 border-zinc-300/60 cursor-pointer;
  }
</style>