Forms

PinInput

Campo PIN con visualizzazione a cifre separate, mascheramento automatico con ritardo e supporto per completamento. Ideale per OTP, codici di sicurezza e PIN numerici.

Import

import { PinInput } from '@pzeta/vue-components'

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string`	`''`	Valore PIN corrente (v-model)
`length`	`number`	`4`	Numero di cifre del PIN
`mask`	`boolean`	`true`	Maschera i caratteri dopo un ritardo
`maskDelay`	`number`	`500`	Millisecondi prima di mascherare il carattere appena inserito
`disabled`	`boolean`	`false`	Disabilita il campo
`error`	`boolean`	`false`	Stato di errore
`errorMessage`	`string`	`''`	Messaggio di errore mostrato sotto il campo
`placeholder`	`string`	`''`	Placeholder per i digit vuoti
`type`	`'number' \| 'text' \| 'password'`	`'number'`	Tipo di input (filtra i caratteri in base al tipo)

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string`	Aggiornamento v-model
`complete`	`string`	Emesso quando tutti i digit sono stati inseriti
`change`	`string`	Emesso ad ogni cambio di valore

Slot

Slot	Scope	Descrizione
`default`	—	Testo label/messaggio mostrato sotto le cifre

Esempi

PIN numerico 4 cifre (default)

PIN con lunghezza personalizzata

Senza mascheramento

Con stato di errore

<template>
  <PinInput
    v-model="pin"
    :error="pinNonValido"
    error-message="PIN non corretto. Riprova."
    @complete="verificaPin"
  >
    Inserisci il PIN
  </PinInput>
</template>

Modalità testo (alfanumerica)

Note sul Comportamento

Il componente usa un input hidden sottostante e mostra i digit come elementi visuali separati
Il tipo 'number' filtra automaticamente i caratteri non numerici
Al mount il focus viene impostato automaticamente (se non disabilitato)
Il mascheramento: il digit appena inserito rimane visibile per maskDelay ms, poi viene mascherato
I digit precedenti vengono mascherati immediatamente
Il click sull'area dei digit riporta il focus all'input hidden

Accessibilità

L'input sottostante ha type="number" o type="text" in base alla prop type
La label e il messaggio di errore sono nel slot default e vengono renderizzati nel DOM
L'attributo maxlength è impostato automaticamente dalla prop length

TypeScript

import type { PinInputProps, PinInputEmits } from '@pzeta/vue-components'

const pinProps: PinInputProps = {
  length: 6,
  mask: true,
  maskDelay: 500,
  type: 'number',
}

Password

Campo password con toggle visibilità, clear button e contatore caratteri. Supporta la stessa API di InputText con l'aggiunta del pulsante show/hide password.

RadioButton

Pulsante radio per selezione esclusiva all'interno di un gruppo, con supporto v-model condiviso, varianti stilistiche e stati di caricamento.