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étables 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 en plusieurs étapes à partir du guide du formulaire en plusieurs étapes.
Créez un bouton de soumission personnalisé alimenté par un schéma qui se désactive dynamiquement pendant la soumission du formulaire et fournit un indicateur de chargement.
Ajoute une simple compte à rebours des caractères restants dans une zone de texte avec une infobulle au survol basée sur la propriété maxlength de la zone de texte
Utilisez un plugin pour ajouter un astérisque (*) à la zone d'étiquette des entrées qui ont la règle "required".
Utilisez un plugin pour convertir les valeurs de chaînes en nombres. Utile si vous voulez que les entrées de type number retournent un primitif JS Number.
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 initiales des entrées sur une chaîne vide "" au lieu de undefined.
Utilisez un plugin pour permettre aux entrées de la famille button d'avoir un indicateur de chargement qui peut être activé à 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 ajoute l'attribut data-testid avec l'id du nœud pour les bibliothèques de test.
Un plugin qui défile automatiquement jusqu'à la première erreur sur la page lors de la soumission ou lorsque des erreurs backend sont ajoutées.
Une entrée personnalisée avec des boutons d'incrémentation +1 et -1. Réalisée en utilisant createInput().
Une entrée personnalisée simple qui permet aux utilisateurs de sélectionner une devise et d'entrer une valeur. Réalisée 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 par défaut de l'entrée radio de FormKit.
Ajoutez un indicateur de chargement à votre entrée lorsqu'une règle de validation asynchrone est en attente de validation.
Activez un bouton d'enregistrement/soumission uniquement 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 le :sections-schema de FormKit.
Un projet de démarrage fonctionnel sur StackBlitz avec Nuxt, FormKit et Tailwind CSS.
Utilisez l'objet de configuration classes et les props de FormKit pour produire des classes dynamiques en fonction de l'état de l'entrée. Utile pour Tailwind et 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 de vos composants.