Forms
InputGroup
Wrapper per raggruppare un input con addon testuali o iconografici (prefix/suffix). Deve essere usato insieme a InputGroupAddon per aggiungere decoratori prima o dopo l'input.
Import
import { InputGroup, InputGroupAddon } from '@pzeta/vue-components'
Esempio Base
Props — InputGroup
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
unstyled | boolean | false | Rimuove gli stili di default |
dt | unknown | — | Design token passthrough (compatibilità PrimeVue) |
pt | unknown | — | Passthrough options (compatibilità PrimeVue) |
ptOptions | unknown | — | Configurazione passthrough options |
Props — InputGroupAddon
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
unstyled | boolean | false | Rimuove gli stili di default |
dt | unknown | — | Design token passthrough (compatibilità PrimeVue) |
pt | unknown | — | Passthrough options (compatibilità PrimeVue) |
ptOptions | unknown | — | Configurazione passthrough options |
Slot
InputGroup
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Contenuto del gruppo: input e addon |
InputGroupAddon
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Contenuto dell'addon: icone, testo, bottoni |
Esempi
Addon con icona
Addon con testo
Con Select
Doppio addon
Accessibilità
- InputGroup è un wrapper puramente visivo; l'accessibilità è garantita dagli input al suo interno
- Gli addon non sono interattivi di default: aggiungere
role="presentation"se contengono icone decorative - Se l'addon contiene informazioni rilevanti, associarle all'input tramite
aria-describedby
TypeScript
import type { InputGroupProps, InputGroupAddonProps } from '@pzeta/vue-components'
// InputGroup e InputGroupAddon accettano solo prop opzionali per la compatibilità PrimeVue
// L'utilizzo principale è tramite slot
FormLabel
Etichetta accessibile per campi form. Supporta stato di errore, indicatore di campo obbligatorio con testo nascosto per screen reader e personalizzazione tramite slot.
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.