Champ de case à cocher
Recueillez facilement les accords et les sélections multiples. Des simples cases à cocher oui/non aux listes à sélection multiple avec « Tout sélectionner », contrôles min/max et mises en page intelligentes, le champ Case à cocher gère les accords uniques et les questions à choix multiples grâce à une validation performante et des options conviviales.
Deux modes pour chaque besoin de case à cocher
Parfait pour:
Des fonctionnalités puissantes pour chaque cas d'utilisation
Deux modes de cases à cocher
Mode case à cocher unique :
Une seule case à cocher pour les questions par oui ou par non, les accords ou les inscriptions. Idéal pour l'acceptation des conditions générales, les abonnements aux newsletters et les formulaires de consentement.
Cas d'utilisation:
- « J’accepte les termes et conditions »
- « Abonnez-moi à la newsletter »
- « Oui, je souhaite recevoir des mises à jour. »
- « Je confirme que ces informations sont exactes. »
Caractéristiques :
- Texte personnalisé des étiquettes des cases à cocher
- État par défaut coché/décoché
- Valeur personnalisée soumise (oui, 1, vrai, etc.)
- Option de validation requise
Mode à cases à cocher multiples :
Options multiples permettant aux utilisateurs de sélectionner plusieurs réponses. Idéal pour les questions à choix multiples (« Sélectionnez toutes les réponses qui s’appliquent »), la collecte de préférences et les enquêtes à choix multiples.
Cas d'utilisation:
- « Quelles fonctionnalités vous intéressent ? » (choix multiples)
- « Choisissez votre mode de contact préféré »
- « Choisissez tous les services dont vous avez besoin »
- « Quels sujets vous intéressent ? » (cochez plusieurs cases)
Caractéristiques :
- Options de cases à cocher illimitées
- Trois styles de mise en page
- Option « Tout sélectionner »
- limites de sélection min/max
- « Autre » avec saisie de texte
- Option exclusive « Aucune des réponses ci-dessus »
🎨 Trois options de mise en page (mode multiple)
Disposition verticale (empilée) :
Les cases à cocher apparaissent une par ligne, empilées verticalement. Mise en page optimale pour les libellés d'options longs.
Meilleur pour:
- Texte d'option long
- 3-10 options
- Formulaires conçus pour les mobiles
- Lisibilité maximale
Disposition horizontale (côte à côte) :
Les cases à cocher apparaissent côte à côte, sur une même ligne. Mise en page compacte pour des libellés courts.
Meilleur pour:
- 2 à 5 options courtes
- Formes compactes
- Agencements de bureau
- Efficacité spatiale
Disposition en grille (plusieurs colonnes) :
Cases à cocher disposées en grille à 2 colonnes. Une mise en page équilibrée qui permet de gagner de la place tout en préservant la lisibilité.
Meilleur pour:
- 4-12 options
- Étiquettes de longueur moyenne
- Conception équilibrée
- Apparence professionnelle
Comportement réactif :
Toutes les mises en page s'adaptent automatiquement aux écrans mobiles, s'empilant si nécessaire pour une meilleure interaction tactile.
✨ Option « Tout sélectionner »
Sélection en un clic :
Ajoutez une case à cocher spéciale « Tout sélectionner » en haut de votre liste. Les utilisateurs pourront ainsi cocher/décocher toutes les options en un seul clic.
Comportement intelligent :
- Vérifie simultanément toutes les options habituelles.
- Tout est décoché lorsqu'on clique à nouveau dessus
- Décoche automatiquement si une option est désélectionnée.
- Affiche un état indéterminé lorsque certaines options (mais pas toutes) sont sélectionnées.
- Exclut l'option « Aucune des réponses ci-dessus » de la sélection de tout.
Idéal pour :
- Listes à cases à cocher longues (5 options ou plus)
- Formulaires où les utilisateurs sélectionnent souvent tout
- Questions à cocher « toutes les réponses qui s’appliquent »
- Sélection des autorisations et des fonctionnalités
Expérience utilisateur:
Permet de gagner du temps sur les longues listes. Les utilisateurs peuvent tout sélectionner, puis décocher les exceptions spécifiques.
✏️ Option « Autre » avec saisie de texte
Collection de réponses personnalisées :
Ajoutez une case à cocher « Autre » qui, une fois sélectionnée, affiche un champ de texte. Les utilisateurs peuvent ainsi saisir leur propre réponse si les options prédéfinies ne leur conviennent pas.
Comment ça fonctionne
- La case à cocher « Autre » apparaît en bas de la liste.
- Une fois coché, le champ de saisie de texte apparaît
- Les utilisateurs saisissent une réponse personnalisée
- La sélection de la case à cocher et le texte sont tous deux soumis.
Cas d'utilisation:
- « Mode de contact préféré : …Autre (veuillez préciser) »
- « Intérêts : …Autres sujets »
- « Comment avez-vous entendu parler de nous : …Autre source »
- Toute liste qui ne peut pas co
Avantages :
Capture les réponses inattendues, offre de la flexibilité, empêche les sélections « forcées » et améliore la qualité des données.
❌ Option « Aucune des réponses ci-dessus »
Non-sélection exclusive :
Ajoutez une option « Aucune des réponses ci-dessus » qui décoche automatiquement toutes les autres sélections lorsqu'on clique dessus.
Exclusivité intelligente :
- Lorsque l'option « Aucun » est cochée, toutes les autres options sont automatiquement décochées.
- Lorsqu'une autre option est cochée, « Aucun » est automatiquement décoché.
- Permet d'indiquer clairement qu'aucune sélection ne s'applique
- Empêche les sélections contradictoires
Cas d'utilisation:
- questions de préférence facultatives
- « Sélectionnez toutes les allergies : …Aucune des réponses ci-dessus »
- vérificateurs de qualifications
- Sélections d'intérêt
Pourquoi inclure :
Empêche l'abandon de formulaire, témoigne de la rigueur, offre une option négative explicite et améliore la précision des données.
📊 Commandes de sélection min/max
Quantité de sélection du contrôle :
Définissez le nombre minimum et maximum de cases à cocher qui doivent/peuvent être sélectionnées.
Sélections minimales :
Les utilisateurs doivent sélectionner au moins X options. Le formulaire ne sera pas soumis tant que cette condition ne sera pas remplie.
Exemples :
- « Sélectionnez au moins 2 centres d’intérêt » (Min : 2)
- « Choisissez au moins 3 préférences » (Min : 3)
- « Choisissez au moins 1 option » (Min : 1)
Sélections maximales :
Limitez le nombre d'options sélectionnables par les utilisateurs à X maximum. Les cases à cocher se désactivent une fois la limite atteinte.
Exemples :
- « Choisissez vos 3 fonctionnalités principales » (Max : 3)
- « Sélectionnez jusqu’à 5 services » (Max : 5)
- « Choisissez au maximum 2 options » (Max : 2)
Commentaires clairs :
Les utilisateurs voient des messages de validation tels que « Veuillez sélectionner au moins 2 options » ou « Maximum 3 sélections autorisées ».
🔧 Gestion simplifiée des options
Contrôle total des choix :
- Ajouter des options – Saisissez du texte et appuyez sur Entrée ou cliquez sur « Ajouter une option ». Créez des listes de cases à cocher en quelques secondes.
- Options d'édition – Mettez à jour indépendamment le texte affiché (ce que les utilisateurs voient) et les valeurs (ce qui est soumis).
- Coché par défaut – Présélectionnez les cases à cocher en cochant la case en regard de chaque option.
- Options de réorganisation – Utilisez les flèches haut/bas pour agencer les cases à cocher dans l'ordre idéal.
- Supprimer les options – Supprimez les options indésirables en un seul clic.
Affichage vs. Valeur :
- Libellé : Ce que les utilisateurs voient (par exemple, « Mises à jour par e-mail »)
- Valeur : Ce qui est stocké (par exemple, « email_updates »)
Bâtiment en vrac :
Ajoutez rapidement plusieurs options en tapant du texte, en appuyant sur Entrée, en tapant à nouveau, puis en appuyant sur Entrée – création rapide de listes de cases à cocher.
☑️ Fonctionnalités de la case à cocher unique
Options de personnalisation:
Texte de l'étiquette de la case à cocher :
Le texte affiché à côté de la case à cocher doit être clair et précis (par exemple : « J’accepte de recevoir des courriels marketing »).
État coché par défaut :
Cochez la case au préalable lors du chargement du formulaire. À utiliser avec précaution : les utilisateurs doivent cocher consciemment les cases d’accord.
Valeur personnalisée soumise :
Définissez la valeur à soumettre lors de la vérification (généralement « oui », « 1 » ou « vrai »). La valeur par défaut est « oui ».
Validation requise :
Rendre la case à cocher obligatoire. Les utilisateurs doivent la cocher pour soumettre le formulaire. Idéal pour les accords obligatoires.
🔀 Logique conditionnelle
Visibilité dynamique des cases à cocher :
Afficher ou masquer les champs de type case à cocher en fonction des autres valeurs du formulaire. Afficher les options uniquement lorsqu'elles sont pertinentes.
Règles de logique avancée :
Logique ET – Toutes les conditions doivent être remplies
Logique OU – Toute condition peut déclencher l'action
8 opérateurs : égal, différent de, supérieur à, inférieur à, contient, est vide, et plus encore.
Cas d'utilisation:
Afficher les cases à cocher « Préférences d’expédition » uniquement lorsque l’option « Expédition requise » est cochée.
Afficher les « Sujets de la newsletter » lorsque la case d’abonnement est cochée.
Afficher les « Services supplémentaires » lorsque le type de service est égal à « Premium »
Masquer les « Options de réduction » lorsque le total de la commande est inférieur à 50 $
🎯 Expérience utilisateur améliorée
Fonctionnalités intelligentes intégrées :
- Indicateurs visuels – Cases à cocher claires et correctement espacées
- Navigation au clavier – Passez facilement d'une option à l'autre par la touche Tab.
- Adapté au tactile – Grandes zones de clic pour les mobiles
- Sélections par défaut – Pré-cocher certaines options
- Classes CSS personnalisées – Appliquer un style aux groupes de cases à cocher
- Assistance à l'accessibilité – Étiquettes ARIA, compatible avec les lecteurs d'écran
- Optimisé pour mobile – Tailles de cases à cocher parfaitement adaptées au toucher
- Étiquettes claires – Texte lisible avec un alignement correct
- Validation requise – Effacer les messages d'erreur
- Texte d'aide – Ajouter des descriptions pour les groupes de cases à cocher complexes
Installation simple en 3 étapes
Préparez votre champ de case à cocher en quelques minutes.
Ajouter un champ de case à cocher
Faites glisser et déposez le champ Case à cocher depuis la section Champs de base dans votre formulaire.
Choisissez le mode
Sélectionnez « Case à cocher unique » pour les questions par oui/non ou « Cases à cocher multiples » pour les options à sélection multiple.
Options de configuration
Pour une seule sélection : définissez l’étiquette et la valeur de la case à cocher. Pour plusieurs sélections : ajoutez des options, choisissez la mise en page, activez éventuellement les options « Tout sélectionner » ou « Autre », et définissez les sélections minimales et maximales.
🎉 Et voilà ! Votre champ de case à cocher est prêt avec une validation intelligente.
Applications du monde réel
Accords et consentement
* Acceptation des conditions générales
* Accords relatifs à la politique de confidentialité
* Consentements par courriel
* Abonnements à la newsletter
Sondages et commentaires
Questions à choix multiples (« Sélectionnez toutes les réponses qui s’appliquent »)
* Sélection d'intérêts multiples
* Collection de préférences de fonctionnalités
* Choix de sujets d'intérêt
E-Commerce
* Sélection des caractéristiques du produit
* Services complémentaires
* Options de livraison
* Préférences de notification
Formulaires d'inscription
* Préférences de communication
* Catégories d'intérêt
* Paramètres d'autorisation
* Sélection de l'accès aux fonctionnalités
Applications
* Vérificateurs de qualifications
* Sélection des compétences
* Domaines d'intérêt
* Options de disponibilité
Paramètres et préférences
* Paramètres du compte
* Options de confidentialité
* Choix de notification
* Basculement des fonctionnalités
Options complètes pour le terrain
Configuration de base
- Libellé du champ – La question ou le titre affiché au-dessus des cases à cocher
- Description/Texte d'aide – Conseils supplémentaires pour les utilisateurs
- Champ obligatoire – Rendre la ou les cases à cocher obligatoires
- Espace réservé – Non applicable aux cases à cocher
Mode case à cocher
Choisissez le type de mode :
- Case à cocher unique – Question par oui ou non, accord ou inscription (une seule case à cocher)
- Cases à cocher multiples – Options à sélection multiple (cases à cocher multiples)
Options à case à cocher unique
- Texte à côté de la case à cocher – Libellé affiché à côté de la case à cocher (par exemple, « J’accepte les conditions »)
- Coché au départ – Case à cocher pré-cochée au chargement du formulaire
- Valeur lorsque la case est cochée – Valeur des données enregistrée lorsque la case est cochée (par défaut : « oui »)
Options à cases à cocher multiples
Style de mise en page :
- Empilés (un par ligne) – Disposition verticale
- Côte à côte (en rangée) – Disposition horizontale
- Grille (plusieurs colonnes) – Mise en page en grille à 2 colonnes
Options de la case à cocher :
Établissez votre liste de choix :
- Texte affiché – Ce que les utilisateurs voient (ex. : « Courriel »)
- Valeur – Ce qui est soumis (ex. : « courriel »)
- Options par défaut cochées – Présélectionnez certaines options
- Réorganiser – Déplacer les options vers le haut/vers le bas
- Supprimer – Options de suppression
Options spéciales :
- Ajouter l'option « Tout sélectionner » – Ajoute une case à cocher en haut permettant de sélectionner/désélectionner toutes les options
- Ajouter une option « Autre » avec zone de texte – Ajoute une option « Autre » avec un champ de texte pour les réponses personnalisées
- Ajouter l'option « Aucune des réponses ci-dessus » : ajoute une option exclusive qui désélectionne toutes les autres lorsqu'elle est sélectionnée.
Limites de sélection :
- Sélections minimales requises – Nombre minimal de cases à cocher qui doivent être sélectionnées (ex. : 2)
- Nombre maximal de sélections autorisées – Nombre maximal de cases à cocher pouvant être sélectionnées (ex. : 5)
logique conditionnelle
- Activer la logique conditionnelle – Afficher/masquer selon les conditions
- Type de logique
- Toutes les conditions doivent être remplies (ET)
- Toute condition peut être remplie (OU)
- Règles de condition
- Afficher/Masquer – Action à entreprendre
- Champ – Quel champ vérifier
- Opérateur – Égal à, Différent de, Contient, Supérieur à, Inférieur à, Est vide, N'est pas vide
- Valeur – Valeur comparative
- Conditions multiples – Ajoutez un nombre illimité de règles
options avancées
- Champ caché – Rendre le champ invisible (non recommandé pour les cases à cocher)
- Classes CSS personnalisées – Appliquer un style personnalisé
- Attributs d'accessibilité – Étiquettes ARIA pour les lecteurs d'écran
Pourquoi choisir notre champ à cases à cocher ?
✅ Deux modes – Type de champ à case à cocher unique ou à cases à cocher multiples
✅ Layouts flexibles – Agencements verticaux, horizontaux ou en grille
✅ Sélectionner tout – Sélection en un clic pour plus de simplicité
✅ Autre option – Saisie de texte pour les réponses personnalisées
✅ Aucune option – Choix exclusif de non-sélection
✅ Limites min/max – Quantité de sélection du contrôle
✅ Gestion facile – Ajoutez, modifiez, réorganisez et supprimez des options sans effort
✅ Convivial – Étiquettes claires, espacement adéquat, faciles à utiliser au toucher
✅ Entièrement synchronisé – Fonctionne parfaitement avec toutes les fonctionnalités du formulaire
Questions fréquemment posées
Q : Quelle est la différence entre les modes à case à cocher unique et multiple ?
En mode unique, une seule case à cocher permet de répondre par oui ou par non. En mode multiple, plusieurs cases à cocher permettent à l'utilisateur de sélectionner plusieurs options.
Q : Les utilisateurs peuvent-ils cocher toutes les cases en même temps ?
Oui. Activez l’option « Tout sélectionner » pour ajouter une case à cocher qui permet de cocher ou de décocher toutes les options en un seul clic.
Q : Comment fonctionnent les sélections min/max ?
Le minimum garantit que les utilisateurs sélectionnent au moins un certain nombre d'options. Le maximum limite le nombre de cases à cocher qu'ils peuvent sélectionner.
Q : À quoi sert l’option « Autre » ?
Elle ajoute une case à cocher supplémentaire intitulée « Autre ». Lorsqu'elle est sélectionnée, un champ de texte apparaît permettant aux utilisateurs de saisir une réponse personnalisée.
Q : Comment fonctionne l’option « Aucune des réponses ci-dessus » ?
Cette option est exclusive. Si elle est sélectionnée, toutes les autres cases sont décochées. Si une autre option est cochée, l'option « Aucun » est automatiquement décochée.
Q : Puis-je présélectionner certaines cases à cocher ?
Oui. En mode mono-option, activez « Démarrer les options sélectionnées ». En mode multi-options, cochez la case correspondant à chaque option que vous souhaitez sélectionner par défaut.
Q : Dois-je cocher les cases de l'accord au préalable ?
Non. Pour les politiques, les conditions d'utilisation et le consentement, les utilisateurs doivent cocher eux-mêmes la case.
Q : Puis-je modifier l'ordre des cases à cocher ?
Oui. Utilisez les flèches haut et bas situées à côté de chaque option pour les réorganiser à votre guise.
Q : Quelle est la différence entre le texte affiché et la valeur ?
Le texte affiché est ce que les utilisateurs voient. La valeur est ce qui est stocké dans votre base de données pour des données propres et cohérentes.
Q : Puis-je utiliser la logique conditionnelle avec des cases à cocher ?
Oui. Déclenchez d'autres champs en fonction des sélections effectuées à l'aide d'opérateurs tels que « Égal à », « Est vide » ou « N'est pas vide ».
Q : Comment créer une case à cocher obligatoire ?
Activez l'option « Champ obligatoire ». En mode unique, la case doit être cochée. En mode multiple, les utilisateurs doivent sélectionner au moins une option ou satisfaire à vos exigences minimales.
Q : Les utilisateurs peuvent-ils modifier leurs sélections après les avoir validées ?
Oui. Ils peuvent cocher ou décocher librement les options avant de soumettre le formulaire. L’option « Tout sélectionner » peut également être activée ou désactivée à tout moment.
