Forms

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.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| number`	—	Valore del campo (v-model)
`defaultValue`	`string \| number \| null`	—	Valore predefinito (modalità non controllata)
`type`	`'text' \| 'email' \| 'url' \| 'tel' \| 'search'`	`'text'`	Tipo nativo dell'input HTML
`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 (mostra asterisco)
`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
`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
`pattern`	`string`	—	Pattern regex per validazione HTML5 nativa
`inputmode`	`string`	—	Suggerimento tastiera virtuale su mobile
`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
`inputId`	`string \| null`	auto-generato	ID dell'elemento input
`inputClass`	`string \| null`	—	Classe CSS aggiuntiva per l'input
`inputStyle`	`string \| object \| null`	—	Stile inline 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 \| number`	Aggiornamento v-model
`input`	`{ originalEvent: Event, value: string \| number }`	Ad ogni input dell'utente
`change`	`{ originalEvent: Event, value: string \| number }`	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 (sovrascrive `prefixIcon`)
`suffix`	—	Contenuto personalizzato a destra dell'input (sovrascrive `suffixIcon`)

Esempi

Con icone e clear button

Varianti visive

Con contatore caratteri

Stati di validazione

Con slot personalizzati

Accessibilità

La label è collegata all'input tramite for/id (ID auto-generato se non specificato)
I campi required mostrano asterisco visivo e testo "obbligatorio" nascosto per screen reader
Lo stato invalid e error impostano aria-invalid sull'input
Il clear button ha tabindex="-1" per non interferire con la navigazione da tastiera
Il loading indicator è escluso dalla navigazione da tastiera

TypeScript

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

const inputProps: InputTextProps = {
  type: 'email',
  label: 'Email',
  required: true,
  variant: 'outlined',
}

InputNumber

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

Int4RangeInput

Input per range di interi PostgreSQL (tipo int4range). Emette e accetta il formato stringa PostgreSQL con notazione inclusiva/esclusiva dei bound (es. "[1,10)").