# Best form blocks 2026: 32 verified sections 32 form sections from 4 registries, with the real cost in the open: 84 npm packages, 134 registry dependencies and two duplicated recipes that compare two form libraries. > Page: https://ui.eneawork.it/blog/migliori-form-blocks-2026 > Markdown: https://ui.eneawork.it/blog/migliori-form-blocks-2026.md *2026-11-01* Un blocco form non si giudica dalla griglia: si giudica da cosa succede quando l’invio fallisce. Nel catalogo ci sono 32 sezioni form da 4 registry, misurate il 1 novembre 2026, e la tabella qui sotto le ordina per numero di file, non per bellezza. Le rotture arrivano tutte dallo stato. Il pulsante che resta attivo durante la richiesta produce due record identici; il messaggio di errore che compare in cima alla pagina non viene annunciato dallo screen reader; l’autofill del browser scrive nell’input prima che React idrati il componente e il campo si svuota al primo render. Sono difetti che nessuna anteprima statica mostra, perché servono un invio lento e un browser con la password salvata. ## Dove si rompe un form La sequenza critica è sempre la stessa: focus sul campo, errore, correzione, nuovo invio. Se l’errore non è legato al campo con un identificativo, chi usa la tastiera riparte dall’inizio del documento. Se il focus resta sul pulsante dopo l’errore, il messaggio esiste ma non viene letto. Se il form disabilita il pulsante senza spiegare perché, il visitatore pensa che il sito sia bloccato e ricarica la pagina, perdendo i dati inseriti. ## Il costo reale: 84 pacchetti npm I 32 blocchi sommano 39 file, 84 dipendenze npm e 134 registry dependency: 2,6 pacchetti per blocco, il valore più alto fra le categorie di blocchi del catalogo. Un blocco come “React Hook Form + Zod” porta quattro pacchetti, react-hook-form, zod, @hookform/resolvers e sonner, e quei quattro finiscono in ogni pagina che importa il form. Le registry dependency pesano uguale: un blocco che chiede field, input-group, checkbox e button trascina con sé mezzo design system. Conteggio del 1 novembre 2026 sui manifest di data/blocks.json: categoria dichiarata o dedotta dal titolo del blocco, somma dei file elencati, delle dipendenze npm e delle registry dependency. Il comando riproducibile è quello più sotto. ## La tabella, ordinata per file Le due righe chiamate “Form in a Dialog” sono lo stesso recipe scritto per due librerie diverse: stessa interfaccia, stato gestito in modo differente. È l’unico punto in cui la tabella offre un confronto diretto, e vale più di dieci screenshot, perché ti dice quanto cambia il codice quando cambi libreria senza cambiare il disegno. ## Le prove da fare in cinque minuti Apri la preview, invia il form vuoto, poi con un’email malformata, poi con la rete rallentata a Slow 3G e un doppio clic sul pulsante. Questi tre passaggi trovano quasi tutti i difetti reali: validazione che non parte, errore non annunciato, invio duplicato. Aggiungi un quarto controllo con la tastiera: dal primo campo all’ultimo, senza mouse, e poi Shift+Tab all’indietro. curl "https://ui.eneawork.it/api/blocks/category/form?limit=10" Le 32 righe dichiarano “see source”, quindi il permesso va letto nel repository del singolo publisher. Attenzione a un secondo livello: i pacchetti npm citati dai blocchi hanno licenza propria, e react-hook-form o zod non seguono quella del blocco che li importa. ## Un limite che il conteggio nasconde Venticinque blocchi su 32 vengono da un solo publisher, flx, quindi la varietà di design è molto minore del numero. Due righe, “Login form” e “Payment form”, sono card con un form dentro, non sezioni di form, e una terza è un checkbox con lo schema. Il catalogo dice 32 perché conta le sezioni che contengono un form, non 32 interpretazioni diverse del problema. ## Regola di decisione Se il form supera i sei campi o richiede validazione lato server, prendi la ricetta minima, campi, checkbox, messaggi, e gestisci lo stato nel tuo codice: un blocco grande impone la sua struttura e la sua libreria. Sotto i tre campi, un blocco card con il form dentro va bene e ti risparmia una giornata. L’alternativa è un form nativo con server action: nessuna libreria, validazione sul server, e il browser fa da solo autofill, cronologia e messaggi. Perdi validazione istantanea e messaggi per campo, guadagni un bundle più leggero e un comportamento prevedibile. Le sezioni stanno su /blocks/category/form, l’inventario su /blocks e la ricetta con Zod ha la scheda qui. Per collegare schema e campi leggi react-hook-form con zod, per gli errori annunciati aria-live nei form, e per il confronto tra le librerie le librerie form React misurate. ## FAQ ### Quanti form blocks ha il catalogo EneUI? 32 sezioni form da 4 registry, misurate il 1 novembre 2026. Il conteggio include ogni blocco che contiene un form, comprese due card con un form al loro interno. ### Perché i form blocks costano più delle altre categorie? Perché sommano 84 dipendenze npm e 134 registry dependency su 32 blocchi. Un solo form con react-hook-form, zod, resolver e un toast system porta quattro pacchetti in ogni pagina che lo usa. ### Meglio react-hook-form o TanStack Form per un blocco copiato? Dipende da cosa usa il resto del progetto: le due librerie non convivono bene. La tabella contiene lo stesso form scritto per entrambe, quindi puoi confrontare il codice prima di scegliere. ### Come evito il doppio invio di un form? Disabilita il pulsante durante la richiesta e rendi l'invio idempotente sul server con una chiave. La sola disabilitazione lato client non basta se la rete è lenta o l'utente ricarica. ### Posso usare un form block senza scrivere la validazione server? No. Lo schema zod del blocco vale nel browser e si aggira disattivando JavaScript. Le stesse regole vanno ripetute nella route o nella server action che riceve i dati.