Une large collection d'exemples avec du code fonctionnel que vous pouvez utiliser dans votre projet dès aujourd'hui.
Le type form ajoute automatiquement un bouton de soumission. Ajoutez des classes pour que son interface utilisateur puisse se conformer aux styles de votre projet.
En utilisant le type list, nous pouvons créer des entrées répétitives qui peuvent avoir plusieurs valeurs. Cet exemple utilise une boucle pour permettre aux utilisateurs d'ajouter/supprimer des adresses e-mail.
Utilisez le composant FormKitSchema pour afficher conditionnellement une entrée (avec des règles de validation) en fonction de la valeur d'une autre entrée.
Utilisez le composant FormKitSchema pour rendre le formulaire multi-étapes à partir du guide du formulaire multi-étapes.
Créez un bouton de soumission alimenté par un schéma personnalisé qui se désactive dynamiquement pendant la soumission du formulaire et fournit un spinner de chargement.
Utilisez un plugin pour ajouter un astérisque (*) à la zone de label des entrées qui ont la règle "obligatoire".
Utilisez un plugin pour convertir les valeurs de chaîne en nombres. Utile si vous voulez que les entrées de type number renvoient une primitive JS Number.
Utilisez un plugin pour modifier le HTML de toutes les entrées de case à cocher descendantes.
Utilisez un plugin pour ajouter une icône avant les messages de validation en étendant la définition du schéma.
Utilisez un plugin pour définir toutes les valeurs d'entrée initiales sur une chaîne vide "" au lieu de undefined.
Utilisez un plugin pour permettre aux entrées de la famille button d'avoir un spinner de chargement qui peut être basculé à volonté avec une nouvelle propriété loading.
Utilisez un plugin pour définir automatiquement les propriétés name, label et help d'une entrée en fonction de l'id. Réduit les déclarations de propriétés répétitives dans votre HTML.
Un plugin qui fait défiler automatiquement jusqu'à la première erreur sur la page lors de la soumission ou lorsque des erreurs de backend sont ajoutées.
Une entrée personnalisée avec des boutons d'étape +1 et -1. Réalisé en utilisant createInput().
Utilisez des slots ou la fonctionnalité :sections-schema pour modifier le HTML d'une étiquette.
Mettez à jour conditionnellement les options d'une entrée select en fonction de la valeur d'une autre entrée.
En utilisant uniquement de nouveaux styles (Classes Tailwind dans cet exemple), appliquez un traitement de carte à la structure d'entrée radio par défaut de FormKit.
Ajoutez un spinner de chargement à votre entrée lorsqu'une règle de validation asynchrone est en attente de validation.
N'activez un bouton de sauvegarde/soumission que si un utilisateur a modifié une valeur à l'intérieur d'un formulaire.
Ajoutez des transitions aux messages de validation en injectant un composant TransitionGroup de Vue en utilisant :sections-schema de FormKit.
Un projet de démarrage fonctionnel sur StackBlitz avec Nuxt, FormKit et Tailwind CSS.
Utilisez la fonction de configuration rootClasses et les props de FormKit pour produire des classes dynamiques basées sur l'état de l'entrée. Utile pour Tailwind et d'autres bibliothèques d'utilitaires CSS.
Créez des variations d'interface utilisateur des entrées FormKit (comme les boutons) qui se mettent à jour en fonction des données réactives dans vos composants.