Forms

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.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string`	—	Valore del campo (v-model)
`defaultValue`	`string \| null`	—	Valore predefinito (modalità non controllata)
`label`	`string \| null`	—	Label mostrata sopra il campo
`placeholder`	`string \| null`	—	Testo placeholder
`helperText`	`string \| null`	—	Testo di aiuto sotto il campo
`error`	`string \| null`	—	Messaggio di errore (sovrascrive helperText)
`variant`	`'outlined' \| 'filled'`	`'outlined'`	Variante visiva del campo
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del campo
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Colore focus e accenti
`disabled`	`boolean`	`false`	Disabilita il campo
`readonly`	`boolean`	`false`	Campo in sola lettura
`required`	`boolean`	`false`	Campo obbligatorio
`invalid`	`boolean`	`false`	Stato di validazione invalido
`fluid`	`boolean`	`false`	Occupa tutta la larghezza disponibile
`rounded`	`boolean`	`false`	Bordi completamente arrotondati
`loading`	`boolean`	`false`	Mostra indicatore di caricamento
`loadingIcon`	`string`	config globale	Classe CSS icona di caricamento
`toggleMask`	`boolean`	`true`	Mostra pulsante per visualizzare/nascondere la password
`feedback`	`boolean`	—	Mostra indicatore di forza password (non implementato nel renderer)
`promptLabel`	`string`	—	Label per campo vuoto nell'indicatore forza
`weakLabel`	`string`	—	Label per password debole
`mediumLabel`	`string`	—	Label per password media
`strongLabel`	`string`	—	Label per password forte
`panelClass`	`string \| null`	—	Classe CSS del pannello feedback
`panelStyle`	`string \| object \| null`	—	Stile inline del pannello feedback
`showClear`	`boolean`	`false`	Mostra pulsante per cancellare il contenuto
`clearIcon`	`string`	config globale	Classe CSS icona clear
`showCharacterCounter`	`boolean`	`false`	Mostra contatore caratteri (richiede `maxlength`)
`maxlength`	`number`	—	Numero massimo di caratteri
`autocomplete`	`string`	—	Valore attributo autocomplete HTML
`prefixIcon`	`string \| null`	—	Classe CSS icona a sinistra del campo
`suffixIcon`	`string \| null`	—	Classe CSS icona a destra del campo (non usata se `toggleMask` è attivo)
`inputId`	`string \| null`	auto-generato	ID dell'elemento input
`inputClass`	`string \| null`	—	Classe CSS aggiuntiva per l'input
`ariaLabel`	`string \| null`	—	Label ARIA per screen reader
`ariaLabelledby`	`string \| null`	—	ID elemento che funge da label ARIA
`tabindex`	`number \| null`	—	Ordine di tabulazione
`autofocus`	`boolean`	`false`	Focus automatico al mount
`name`	`string \| null`	—	Nome del campo per form nativi

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string`	Aggiornamento v-model
`input`	`{ originalEvent: Event, value: string }`	Ad ogni input dell'utente
`change`	`{ originalEvent: Event, value: string }`	Al cambio del valore (blur)
`focus`	`FocusEvent`	Quando il campo riceve il focus
`blur`	`FocusEvent`	Quando il campo perde il focus
`keydown`	`KeyboardEvent`	Alla pressione di un tasto
`keyup`	`KeyboardEvent`	Al rilascio di un tasto
`keypress`	`KeyboardEvent`	Alla pressione di un tasto che produce carattere
`paste`	`ClipboardEvent`	Al paste di contenuto
`clear`	`Event`	Quando il contenuto viene cancellato tramite clear button

Slot

Slot	Scope	Descrizione
`prefix`	—	Contenuto personalizzato a sinistra dell'input
`suffix`	—	Contenuto personalizzato a destra (non visibile se `toggleMask` è attivo)

Esempi

Con icona personalizzata

Senza toggle visibilità

Con clear button

Form cambio password

Accessibilità

Il pulsante toggle visibilità ha aria-label localizzato ("Mostra password" / "Nascondi password")
Il pulsante toggle ha tabindex="-1" per non interferire con la navigazione da tastiera
L'attributo autocomplete="current-password" o "new-password" dovrebbe essere impostato esplicitamente via prop autocomplete

TypeScript

import type { PasswordProps } from '@pzeta/vue-components'

const passwordProps: PasswordProps = {
  label: 'Password',
  toggleMask: true,
  showClear: false,
  required: true,
  autocomplete: 'current-password',
}

MultiSelect

Dropdown per la selezione multipla con chips, filtro, toggle-all e limite di selezione. Supporta visualizzazione comma e chip per i valori selezionati.

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.