Migliori form blocks 2026: 32 sezioni verificate

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.

• Libreria di stato: react-hook-form e TanStack Form non convivono bene nello stesso progetto, scegline una.
• Schema: se il blocco importa zod, la validazione lato client è già scritta e va duplicata lato server.
• Registry dependency: sono i componenti shadcn richiesti dal manifest e possono sovrascrivere versioni già personalizzate.
• Dati di esempio: un blocco “Payment form” contiene numeri di carta finti da rimuovere prima del deploy.

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.

• Il pulsante mostra uno stato di attesa e non accetta un secondo invio.
• Ogni messaggio di errore è collegato al campo tramite aria-describedby e ha un id stabile.
• Il campo compilato dall’autofill conserva il valore dopo l’idratazione.
• I dati di esempio del blocco sono sostituiti o marcati come fittizi.

curl "https://ui.eneawork.it/api/blocks/category/form?limit=10"

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.