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'

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)
`reserveMessageSpace`	`boolean`	`true`	Riserva sotto il campo lo spazio del messaggio anche senza `helperText` né `error`, così un errore non sposta i campi sotto. `false` nelle barre filtri: un `error` resta comunque visibile (dalla 1.23.0)
`variant`	`'outlined' \| 'filled'`	`'outlined'`	Variante visiva del campo. Il bordo di `outlined` usa `--color-field-border`, almeno 3:1 su ogni superficie (dalla 1.24.0)
`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. Opacità solo sul wrapper (0,6): fino alla 1.23 si sommava a quella del campo (0,6 × 0,5) (dalla 1.24.0)
`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`)

Attributi non dichiarati come prop

Dalla versione 1.9.0 gli attributi passati dall'esterno vengono ripartiti: class e style restano sul wrapper radice, tutto il resto (data-*, name, attributi ARIA extra, listener non dichiarati) arriva all'<input> interno. Prima venivano scartati in silenzio.

<InputText id="codiceclient" class="flex-1" data-testid="wizard-codiceclient" />

<div class="hs-inputtext-wrapper w-full flex-1">
  <div class="relative">
    <input id="codiceclient" data-testid="wizard-codiceclient" class="hs-inputtext ..." />
  </div>
</div>

Due attributi restano gestiti dal componente e non vengono sovrascritti:

id — applicato all'<input> ed è l'id a cui punta la <label>;
aria-describedby — applicato all'<input>, concatenato con gli id di helper text, messaggio di errore e counter, che altrimenti andrebbero persi.

Vale per tutti i campi form: vedi la panoramica della categoria.

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)").

InputText

Import

Esempio Base

Props

Emits

Slot

Esempi

Con icone e clear button

Varianti visive

Con contatore caratteri

Stati di validazione

Con slot personalizzati

Attributi non dichiarati come prop

Accessibilità

TypeScript