Money
Pattern canonico per mostrare e raccogliere importi in euro leggibili, coerenti e privi di dettagli tecnici.
L’importo di dominio non è copy finale
Ogni superficie presenta euro nel formato italiano, per esempio 1.250,00 €. In lettura usa il formatter condiviso; nei form usa il parser condiviso e conserva il formato canonico soltanto internamente. La pagina non ricostruisce conversioni nei componenti e non usa numeri floating-point.
Una sola sorgente di verità
Formatter per importi singoli, valori facoltativi e intervalli, insieme al parser degli input in euro, vivono nel modulo condiviso del design system. Workspace aggiunge soltanto presenter di dominio per accordi e proposte; Sirio esegue gli stessi helper generici senza mostrare i dettagli del formato interno.
Regole di lettura
La forma del valore resta stabile; label e contesto spiegano che cosa rappresenta.
- Importo semplice
- Mostra label contestuale e valore completo in euro, con separatori italiani e due decimali.
- Variazione
- Indica esplicitamente aumento o riduzione e conserva il segno davanti al valore. Il colore può rafforzare, mai sostituire il testo.
- Intervallo
- Mostra minimo e massimo nello stesso ordine, separati da un trattino medio. Se è disponibile un solo estremo, chiamalo Importo minimo o Importo massimo.
- Valore facoltativo
- Ometti la riga quando non serve alla decisione; altrimenti usa una frase umana come Non indicato o Non indicata.
- Valore illeggibile
- Usa il fallback neutro Importo non disponibile e non renderizzare mai il dato ricevuto.
Specimen canonici
Gli esempi coprono importo semplice, input, variazioni, intervallo, assenza ed errore senza esporre il formato interno.
Importi in lettura
La label comunica il significato; il valore mantiene sempre la stessa notazione italiana.
- Stima iniziale
- 1.250,00 €
- Variazione economica
Aumento proposto: +250,00 €
Riduzione proposta: -125,00 €
- Intervallo proposto
- 900,00 € – 1.100,00 €
- Stima facoltativa
- Non indicata
Input in euro
Lo specimen usa lo stesso parser del Workspace e non invia dati.
Il separatore decimale ammette al massimo due cifre.
Input monetari
Il controllo segue il pattern Form Validation: label visibile, descrizione utile, errore locale, associazioni ARIA e focus di recupero.
- La label descrive il significato del valore, per esempio Importo, Stima iniziale o Variazione.
- Usa inputMode decimal, una descrizione breve e un placeholder che sia soltanto un esempio.
- Accetta la notazione italiana supportata dal parser: 1250, 1.250,00 e il simbolo euro finale facoltativo.
- Un campo vuoto facoltativo resta assente; un campo obbligatorio vuoto riceve un errore locale.
- I valori negativi sono ammessi soltanto nei contesti che rappresentano davvero una riduzione, come una variazione economica.
- Converti nel formato canonico soltanto al confine del submit, senza passare da numeri floating-point.
Contesto economico reale
Nell’accordo iniziale il valore è una stima; nelle proposte è una baseline, una variazione o un intervallo; nei pagamenti documentati è l’importo richiesto o dichiarato dalle parti. La label deve preservare questa differenza.
Mostrare un importo non prova che un pagamento sia avvenuto. Qoovex registra informazioni e dichiarazioni: non incassa, custodisce, trasferisce, verifica automaticamente o garantisce denaro.
Accessibilità e responsive
Valore, significato e recupero dell’errore devono restare comprensibili con tastiera, screen reader e viewport ridotti.
- Associa sempre la label al controllo e collega descrizione ed errore con ID stabili.
- Usa cifre tabulari quando più valori devono essere confrontati, senza trasformare paragrafi o istruzioni in testo accent.
- Lascia andare a capo label e valori lunghi; non troncare il simbolo euro o un estremo dell’intervallo.
- Per aumento e riduzione mantieni segno e testo esplicito anche senza colore.
- Dopo un errore porta il focus al campo coinvolto; dopo un valore valido comunica il formato risultante con un solo messaggio di stato.
Errori da evitare
Il presentation layer non deve inventare calcoli, significati o garanzie economiche.
- Mostrare il valore serializzato ricevuto dal dominio o nomi di proprietà backend.
- Chiedere all’utente di inserire centesimi invece di euro.
- Usare il punto come separatore decimale o mescolare convenzioni locali nello stesso flusso.
- Interpretare silenziosamente input ambigui invece di mostrare un errore specifico vicino al campo.
- Comunicare aumento e riduzione soltanto con verde e rosso.
- Aggiungere IVA, commissioni, aliquote, scadenze o calcoli che il dominio non fornisce.
- Descrivere un importo documentato come pagato, verificato o garantito da Qoovex.