Essayez de changer type="radio" à la ligne 5 en checkbox.
Le framework de formulaire open-source pour Vue
FormKit permet aux développeurs de construire leurs formulaires 10 fois plus rapidement en simplifiant la structure des formulaires, la génération, la validation, le thème, la soumission, la gestion des erreurs, et plus encore.
Formulaires
Fonctionnalités puissantes pour le flux de données, la gestion des erreurs et de l'état.
Entrées
Plus de 24 entrées accessibles alimentées par un seul composant.
Validation
Plus de 20 règles de validation intégrées et prise en charge de l'écriture de vos propres règles.
Style
Utilisez le thème CSS par défaut de FormKit, Genesis, Tailwind ou votre propre approche personnalisée avec un contrôle total sur chaque élément DOM.
Schéma
Générez des formulaires avec le schéma dynamique compatible JSON de FormKit. Entièrement sérialisable pour le stockage en base de données.
Architecture
Conçu pour gérer les formulaires les plus exigeants.
Soutenu par
nouveau — v.1.4.0
Présentation des Thèmes FormKit
Thèmes Tailwind open-source sous licence MIT pour FormKit.
Formulaires
Remplir un formulaire avec un seul objetCollecte automatique de toutes les valeurs d'entréeAppliquer les erreurs du backend aux formulaires et aux entréesAccéder à n'importe quelle valeur de formulaire sans
v-modelOptionnellement v-model un formulaire entier avec un seul objetÉtat de chargement automatique pour les soumissions asynchronesSuivi de l'état pour les valeurs invalides, le chargement, les erreurs, et plus encoreDésactiver facilement toutes les entrées d'un formulaireRéinitialisation du formulaireStructurez vos données sous forme d'objets, de tableaux et de valeurs scalairesCharger l'exemple en direct
Entrées
Structure entière dans 1 composant
<FormKit />Inclut tous les types d'entrée (plus de 24)Accessibilité intégréeSuivi de l'état pour les valeurs invalides, le chargement, les erreurs, et plus encoreExportation pour restructurer le HTML de l'entréeCréer des entrées personnaliséesContrôler les valeurs d'entrée avec des middlewareDOM automatique pour l'étiquette, l'aide, les messages, et plus encorePrise en charge des entrées conditionnellesSlots pour chaque élément DOMCharger l'exemple en direct
Validation
Appliquer les règles dans une seule propriétéInclut des messages de validation dans plus de 40 languesContrôler quand afficher les erreursPrise en charge des règles asynchronesDélai d'attente pour les règles de validation coûteusesBloquer la soumission du formulaire jusqu'à ce que la validation soit réussiePrise en charge des règles facultatives et conditionnellesAjouter des règles de validation personnalisées et des messages de validationMessages au niveau du formulaire et de l'entrée
Charger l'exemple en direct
Style
Approche de style agnostiqueThème de première partie optionnelThèmes TailwindSupport pour les cadres CSS utilitairesAjouter des classes à n'importe quel élément DOMRemplacer n'importe quel élément DOMAttributs dynamiques qui suivent l'étatPack d'icônes intégréUtilisez vos propres icônes SVGIntégration facile avec les bibliothèques d'icônes tierces
Charger l'exemple en direct
Schéma
Format compatible JSONRendu de n'importe quel DOM et composantsLogique booléenne, comparaison, expressions arithmétiquesRéférence de données réactives dans le schémaPrise en charge du rendu de listeRendu de n'importe quel slot nomméRendu conditionnelRaccourci pour le rendu des entrées FormKitStockez le schéma n'importe où
Charger l'exemple en direct
Essayez de modifier pricePerUser à la ligne 2 pour voir le formulaire alimenté par le schéma se mettre à jour.
Architecture
Aucune dépendance tiercePrise en charge de TypeScriptTree-shakableÉtendre avec des pluginsLes plugins peuvent être appliqués au niveau d'une entrée, d'un groupe ou globalPartage de code entre les entrées avec
featuresÉtendre avec des hooksSystème d'événementsÉcrivez vos propres entréesPrise en charge complète du rendu côté serveurEnveloppez les entrées tiercesOutil en ligne de commandePersonnalisez avec la configuration de FormKitCommunauté active et supportArchitecture d'internationalisationStructure d'entrée hiérarchiqueCharger l'exemple en direct
FormKit Pro
Boostez FormKit avec des entrées Pro facultatives
Contrôles de formulaire commerciaux puissants, avec la même excellente API.
- Autocomplete
- Colorpicker
- Currency
- Datepicker
- Dropdown
- Mask
- Rating
- Repeaterfree
- Slider
- Taglist
- Togglefree
- Toggle Buttonsfree
- Transfer List
- Unit
Autocomplete
Recherche et sélection à partir d'une liste d'options personnalisée.