Form
Campi input aggregati per la raccolta di dati e la configurazione di opzioni
ComponentiMetadati e link per approfondire
Quando usarlo
Il componente form, o modulo, è un involucro (wrapper) che permette di raggruppare e impaginare campi input correlati per l'invio di informazioni o la configurazione di opzioni.
Le persone possono inviare il form quando tutti i campi obbligatori sono compilati e i dati sono validi rispetto al formato richiesto dallo specifico campo.
Come usarlo
Puoi costruirlo usando per i campi i componenti dedicati: autocomplete, datepicker, input, number input, radio button, select, timepicker, toggles, transfer, upload.
Attenzione a
- Se il modulo è lungo e complesso, valuta se già possiedi da altre fonti alcuni dei dati che dovresti richiedere: se sì potresti semplicemente farli validare all'utente, evitandogli di inserirli ex novo; per semplificare la compilazione, puoi inoltre dividere il form in più passi, utilizzando il componente Stepper.
- Implementa per tutti i campi del form la migliore validazione possibile dei valori inseriti; l'obiettivo della validazione non è restituire errori generici, ma guidare l'utente nella compilazione e nella risoluzione di eventuali errori, oltre che standardizzare i dati inviati.
- Data la natura di interazione complessa, testa sempre la sua efficacia con gli utenti.
Buone pratiche sui contenuti
- Prevedi un titolo e una descrizione del form, e laddove necessario titoli intermedi se utili alla scansione di gruppi di campi o step.
- Inserisci didascalie e istruzioni tra i campi se necessarie a guidare la compilazione da parte dell'utente; puoi anche utilizzare soluzioni di aiuto contestuale come i tooltip.
- Cura la leggibilità dei contenuti delle etichette (label) e dei testi segnaposto per tutti i campi: devono essere chiari e concisi.
- Cura la progettazione dei microtesti di errore: devono aiutare le persone a completare la compilazione e risolvere in autonomia eventuali errori.
Accessibilità
Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia
| Caratteristica | Stato | Descrizione |
|---|---|---|
Visivamente accessibile | Da verificare | Uso e contrasto dei colori, leggibilità |
Amichevole con lettori di schermo | Da verificare | Struttura titolazioni, etichette e testi alternativi |
Navigabile | Da verificare | Focus, struttura, navigazione da tastiera o altri device |
Comprensibile | Da verificare | Comprensibile, prevedibile, gestione semplice dell’errore |
Stato del componente
Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system
| Libreria | Stato componente | Link |
|---|---|---|
UI Kit Italia (design) | Non presente | KitUI Kit Italia su Figma (si apre in una nuova finestra) |
Bootstrap Italia | Da verificare | Scheda documentazione (si apre in una nuova finestra) |
React | Da verificare | Scheda Storybook (si apre in una nuova finestra) |
Angular | Da verificare | Scheda documentazione (si apre in una nuova finestra) |
Anatomia
In stesura
Comportamento
All'invio dei dati il form, se ci sono errori nella compilazione, restituisce un messaggio di alert complessivo e riferimenti visivi e informativi puntuali sulla validità di ogni campo di cui è composto.
Specifiche di design
In stesura
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici