Forms

InputNumber

Campo numerico con formattazione locale, supporto valute, pulsanti stepper e gestione min/max/step. Usa Intl.NumberFormat per la formattazione.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`number \| null`	—	Valore del campo (v-model)
`defaultValue`	`number \| null`	—	Valore predefinito (modalità non controllata)
`label`	`string \| null`	`null`	Label mostrata sopra il campo
`placeholder`	`string \| null`	`null`	Testo placeholder
`helperText`	`string \| null`	`null`	Testo di aiuto sotto il campo
`error`	`string \| null`	`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
`min`	`number \| null`	`null`	Valore minimo consentito
`max`	`number \| null`	`null`	Valore massimo consentito
`step`	`number`	`1`	Incremento per i pulsanti stepper e tasti freccia
`minFractionDigits`	`number \| null`	`null`	Cifre decimali minime
`maxFractionDigits`	`number \| null`	`null`	Cifre decimali massime
`mode`	`'decimal' \| 'currency'`	`'decimal'`	Modalità di formattazione
`currency`	`string`	`'EUR'`	Codice valuta ISO 4217 (es: `'EUR'`, `'USD'`)
`locale`	`string`	`'it-IT'`	Locale BCP 47 per formattazione (es: `'it-IT'`, `'en-US'`)
`prefix`	`string \| null`	`null`	Prefisso custom (es: `'$'`, `'€'`) - solo in modalità `decimal`
`suffix`	`string \| null`	`null`	Suffisso custom (es: `' kg'`, `'%'`) - solo in modalità `decimal`
`showButtons`	`boolean`	`false`	Mostra pulsanti incremento/decremento
`buttonLayout`	`'stacked' \| 'horizontal' \| 'vertical'`	`'stacked'`	Layout dei pulsanti stepper
`incrementButtonIcon`	`string`	config globale	Icona pulsante incremento
`decrementButtonIcon`	`string`	config globale	Icona pulsante decremento
`incrementButtonClass`	`string \| null`	`null`	Classe CSS aggiuntiva pulsante incremento
`decrementButtonClass`	`string \| null`	`null`	Classe CSS aggiuntiva pulsante decremento
`highlightOnFocus`	`boolean`	`false`	Seleziona tutto il testo al focus
`useGrouping`	`boolean`	`true`	Usa separatori delle migliaia
`allowEmpty`	`boolean`	`true`	Consente valore vuoto (`null`)
`showClear`	`boolean`	`false`	Mostra pulsante per cancellare il valore
`prefixIcon`	`string \| null`	`null`	Classe CSS icona a sinistra del campo
`suffixIcon`	`string \| null`	`null`	Classe CSS icona a destra del campo
`inputId`	`string \| null`	auto-generato	ID dell'elemento input
`name`	`string \| null`	`null`	Nome del campo per form nativi
`autofocus`	`boolean`	`false`	Focus automatico al mount
`ariaLabel`	`string \| null`	—	Label ARIA per screen reader
`ariaLabelledby`	`string \| null`	—	ID elemento che funge da label ARIA
`tabindex`	`number \| null`	—	Ordine di tabulazione

Emits

Evento	Payload	Descrizione
`update:modelValue`	`number \| null`	Aggiornamento v-model
`change`	`{ originalEvent: Event, value: number \| null }`	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 valore viene cancellato tramite clear button

Slot

Slot	Scope	Descrizione
`prefix`	—	Contenuto personalizzato a sinistra dell'input
`suffix`	—	Contenuto personalizzato a destra dell'input
`incrementbuttonicon`	—	Icona personalizzata per il pulsante incremento
`decrementbuttonicon`	—	Icona personalizzata per il pulsante decremento

Esempi

Con range e step

Con prefix e suffix

Modalità valuta

Con pulsanti stepper

Accessibilità

La label è collegata all'input tramite for/id (ID auto-generato se non specificato)
I tasti ArrowUp/ArrowDown incrementano/decrementano il valore rispettando step, min, max
In focus il valore viene mostrato senza formattazione per facilitare la modifica
Al blur il valore viene formattato secondo locale e mode

TypeScript

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

const numberProps: InputNumberProps = {
  mode: 'currency',
  currency: 'EUR',
  locale: 'it-IT',
  min: 0,
  max: 9999,
  showButtons: true,
}

InputMask

Campo di testo con maschera di formattazione per input strutturati come date, codici fiscali, numeri di telefono e codici seriali. Supporta pattern con caratteri speciali e opzioni di autoclear.

InputText

Campo di testo generico con supporto per icone, clear button, contatore caratteri e varianti visive. Compatibile con v-model e tutti i tipi HTML5 standard.