Pin Input

A row of single-character fields for PINs / one-time codes. The field count is taken from the number of input parts you render.

Verification code

<div
  data-controller="zag-pin-input"
  data-part="root"
  data-zag-pin-input-otp-value="true"
  class="space-y-1"
>
  <label data-part="label" class="text-sm font-medium">Verification code</label>
  <div data-part="control" class="flex gap-2">
    <input
      data-part="input"
      class="border-input bg-popover focus:border-primary focus:ring-ring/50 h-12 w-10 rounded-lg border text-center text-lg focus:outline-none focus:ring-2"
    />
    <input
      data-part="input"
      class="border-input bg-popover focus:border-primary focus:ring-ring/50 h-12 w-10 rounded-lg border text-center text-lg focus:outline-none focus:ring-2"
    />
    <input
      data-part="input"
      class="border-input bg-popover focus:border-primary focus:ring-ring/50 h-12 w-10 rounded-lg border text-center text-lg focus:outline-none focus:ring-2"
    />
    <input
      data-part="input"
      class="border-input bg-popover focus:border-primary focus:ring-ring/50 h-12 w-10 rounded-lg border text-center text-lg focus:outline-none focus:ring-2"
    />
  </div>
  <input data-part="hidden-input" class="sr-only" />
</div>

Parts

root, label, control, input, hidden-input.

Values

Attribute	Type	Default	Description
data-zag-pin-input-value-value	Array	[]	Initial characters (JSON).
data-zag-pin-input-count-value	Number	(from DOM)	Field count; defaults to the # of inputs.
data-zag-pin-input-type-value	String	"numeric"	"numeric", "alphanumeric", "alphabetic".
data-zag-pin-input-otp-value	Boolean	false	Set autocomplete="one-time-code".
data-zag-pin-input-mask-value	Boolean	false	Mask entered characters (password style).
data-zag-pin-input-placeholder-value	String	"○"	Placeholder character.
data-zag-pin-input-name-value	String	""	name of the hidden input (for forms).
data-zag-pin-input-blur-on-complete-value	Boolean	false	Blur the last field when complete.
data-zag-pin-input-select-on-focus-value	Boolean	false	Select the field's content on focus.
data-zag-pin-input-disabled-value	Boolean	false	Disable the input.
data-zag-pin-input-required-value	Boolean	false	Mark the field required.
data-zag-pin-input-invalid-value	Boolean	false	Mark the field invalid.
data-zag-pin-input-read-only-value	Boolean	false	Read-only.

Events

Emits zag-pin-input:change ({ value, valueAsString }) on each keystroke and zag-pin-input:complete (same detail) when all fields are filled.

Programmatic control

value (getter), setValue(value), clear(), focus().