Boutons radio
Recueillez des réponses uniques avec clarté et élégance. Des questions simples par oui/non aux choix complexes à options multiples avec des mises en page flexibles, des options personnalisées et des fonctionnalités intelligentes, le champ Boutons radio garantit que les utilisateurs sélectionnent une seule réponse dans votre liste.
Idéal pour les questions à choix unique
Parfait pour:
Des fonctionnalités puissantes pour chaque cas d'utilisation
🎨 Options de mise en page flexibles
Trois mises en page professionnelles :
- Verticale (empilée) – Les options apparaissent une par ligne, empilées verticalement. Mise en page la plus traditionnelle et la plus lisible pour les libellés d'options longs.
- Horizontal (en ligne) – Les options apparaissent côte à côte. Idéal pour les étiquettes courtes et les formulaires compacts.
- Grille (2 colonnes) – Options disposées dans une grille à deux colonnes. Gain de place tout en préservant la lisibilité.
Choisissez en fonction de :
- Vertical : Étiquettes d’options longues, choix détaillés, formulaires traditionnels
- Horizontalement : 2 à 5 options courtes (Oui/Non, Homme/Femme, etc.)
- Grille : plus de 4 options de longueur moyenne, mise en page équilibrée
Comportement réactif :
Toutes les mises en page s'adaptent automatiquement aux écrans mobiles, s'empilant verticalement si nécessaire pour une meilleure interaction tactile.
🎲 Ordre aléatoire des options
Randomisation de niveau d'enquête
Mélange l'ordre des options à chaque chargement du formulaire. Élimine les biais de position dans les enquêtes, les sondages et les formulaires de recherche.
Pourquoi randomiser ?
- Prévient les biais d'ordre dans les enquêtes
- Garantit une répartition équitable de la sélection
- Méthodologie de recherche professionnelle
- Améliore la qualité des données
Idéal pour :
- Formulaires d'enquête et questionnaires
- Tests A/B et recherche
- Sondages et votes
- Études de préférence
Comportement intelligent :
Les options spéciales comme « Autre » et « Aucune des réponses ci-dessus » peuvent rester en bas même lorsque les options principales sont aléatoires.
❌ Option « Aucune des réponses ci-dessus »
Non-sélection explicite
Ajoutez une option « Aucune des réponses ci-dessus » ou « Sans objet » à la fin de votre liste. Cela permet aux utilisateurs d’indiquer clairement qu’aucune option ne leur convient.
Pourquoi inclure ceci ?
- Empêche les sélections forcées
- Améliore la précision des données
- Couvre tous les aspects.
- Réduit l'abandon des formulaires
Idéal pour :
- questions de préférence facultatives
- questions de type « Sélectionnez toutes les réponses qui s’appliquent »
- vérificateurs de qualifications
- Sélections d'intérêt
Positionnement intelligent :
L’option « Aucun » apparaît toujours en dernier, ce qui permet de la distinguer clairement des autres choix.
🔧 Gestion simplifiée des options
Contrôle total des choix :
- Ajouter des options – Saisissez votre texte et cliquez sur « Ajouter une option » ou appuyez sur Entrée. Créez votre liste en quelques secondes.
- Options d'édition – Modifiez indépendamment le texte affiché (ce que les utilisateurs voient) et les valeurs (ce qui est soumis).
- Réorganiser les options – Utilisez les flèches haut/bas pour agencer les options dans l'ordre idéal.
- Supprimer les options – Supprimez les options en un seul clic. Aucune option n'est définitive.
Affichage vs. Valeur :
- Étiquette : Ce que les utilisateurs voient (par exemple, « Excellent service »)
- Valeur : Ce qui est stocké dans la base de données (par exemple, « excellent_service »)
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 d'options pour les longues listes.
✅ Sélection par défaut
Présélectionnez une option
Choisissez le bouton radio sélectionné par défaut au chargement du formulaire. Orientez les utilisateurs vers les réponses courantes ou mettez en évidence les choix recommandés.
Cas d'utilisation:
Présélectionnez la réponse la plus courante pour accélérer le remplissage.
Mettre en évidence l'option recommandée (par exemple, le forfait « Meilleur rapport qualité-prix »)
Définir l'option d'accord par défaut (conditions acceptées)
Guider les utilisateurs vers leur choix préféré
Ou pas de valeur par défaut :
Ne sélectionnez aucune option, obligeant ainsi les utilisateurs à faire un choix. Idéal pour les questions nécessitant une sélection consciente.
✏️ Option « Autre » avec saisie de texte
Collection de réponses personnalisées
Ajoutez une option « Autre » qui, une fois sélectionnée, affichera un champ de saisie de texte. Les utilisateurs pourront ainsi indiquer leur propre réponse si aucune des options prédéfinies ne leur convient.
Étiquette personnalisable :
- Modifiez le texte de l’étiquette « Autre » en fonction de vos besoins :
- « Autre (veuillez préciser) »
- « Autre chose »
- « Réponse personnalisée »
- « Non répertorié »
Comment ça fonctionne
Lorsque les utilisateurs sélectionnent « Autre », un champ de texte apparaît instantanément pour leur permettre de saisir leur réponse personnalisée. La sélection « Autre » et le texte saisi sont alors enregistrés.
Cas d'utilisation:
- « Comment avez-vous entendu parler de nous ? » avec une source de recommandation personnalisée
- Préférence de produit avec options non répertoriées
- Catégories de commentaires avec « Autres préoccupations »
- Toute liste qui ne peut pas couvrir toutes les possibilités
🔀 Logique conditionnelle
Visibilité dynamique des boutons radio
Affichez ou masquez les champs de type bouton radio en fonction des autres valeurs du formulaire. Créez des formulaires intelligents qui s'adaptent aux choix de l'utilisateur.
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 options du produit uniquement lorsque le type de produit est sélectionné
- Afficher les préférences d'expédition lorsque le mode d'expédition est « Express »
- Masquer les options de paiement lorsque le total de la commande est inférieur à 100 $
- Afficher des questions supplémentaires en fonction de la réponse initiale
🎯 Expérience utilisateur améliorée
Fonctionnalités intelligentes intégrées :
- Application de la sélection unique – Une seule option peut être sélectionnée à la fois (comportement standard des boutons radio)
- Validation obligatoire – Rendez la sélection obligatoire avec des messages d'erreur clairs.
- Navigation au clavier – Les touches fléchées permettent de naviguer entre les options d’accessibilité
- Classes CSS personnalisées – Appliquez un style personnalisé qui correspond à votre marque
- Assistance à l'accessibilité – Étiquettes ARIA, compatible avec les lecteurs d'écran
- Optimisé pour mobile – Compatible avec les écrans tactiles grâce à des zones de clic plus larges
- Retour visuel – Indication claire de l'option sélectionnée
- Assistance textuelle – Ajoutez des descriptions pour clarifier les choix
Installation simple en 3 étapes
Préparez votre champ de boutons radio en quelques minutes.
Ajouter le champ des boutons radio
Faites glisser le champ « Boutons radio » depuis la section « Champs de base » vers votre formulaire.
Ajoutez vos options
Saisissez les libellés des options et cliquez sur « Ajouter une option » pour créer votre liste. Réorganisez-les à l’aide des flèches et modifiez les libellés et les valeurs selon vos besoins.
Choisissez la mise en page et les fonctionnalités
Sélectionnez le style de mise en page (vertical, horizontal ou grille), ajoutez éventuellement l'option « Autre » ou « Aucun des choix ci-dessus », définissez la sélection par défaut si vous le souhaitez.
🎉 Voilà ! Vos boutons radio sont prêts pour la sélection à choix unique.
Applications du monde réel
Sondages et commentaires
* Évaluation de la satisfaction (Très satisfait à Très insatisfait)
* Échelles d'accord (de « Tout à fait d'accord » à « Pas du tout d'accord »)
* Questions de fréquence (quotidienne, hebdomadaire, mensuelle, rare, jamais)
* Questions d'évaluation (1 à 5 étoiles, d'Excellent à Médiocre)
E-Commerce
* Sélection de la taille du produit (Petit, Moyen, Grand, XL)
* Préférences de couleur
* Choix du mode de livraison
* Options d'emballage cadeau
Formulaires d'inscription
* Sélection du sexe
* Choix de tranches d'âge
* Niveau d'expérience (Débutant, Intermédiaire, Avancé)
* Sélection du niveau d'adhésion
applications commerciales
* Niveau de priorité (Élevé, Moyen, Faible)
* Sélection du département
* Préférence de contact (courriel, téléphone, SMS)
* Options de gamme de prix
Education et formation
* Sélection du niveau de cours
* Préférence en matière de rythme d'apprentissage
* Disponibilités horaires
* Type de certification
Santé et bien-être
* Sélection du type de rendez-vous
* Choix de l'assureur
* Gravité des symptômes (Léger, Modéré, Grave)
* Préférence de consultation
Options complètes pour le terrain
Configuration de base
- Libellé du champ – La question ou le titre affiché au-dessus des boutons radio
- Description/Texte d'aide – Conseils supplémentaires pour les utilisateurs
- Champ obligatoire – Rendre la sélection obligatoire
- Espace réservé – Non applicable aux boutons radio
Mise en page et présentation
- Style de mise en page
- Vertical (empilé) – un par ligne
- Horizontal (en ligne) – côte à côte
- Grille (2 colonnes) – mise en page équilibrée
Options des boutons radio
- Ajouter des options – Créez votre liste de choix
- Texte affiché – Ce que les utilisateurs voient
- Valeur – Ce qui est soumis avec le formulaire
- Réorganiser – Déplacer les options vers le haut/vers le bas
- Supprimer – Options de suppression
Sélection par défaut
Valeur par défaut sélectionnée – Présélectionnez une option ou laissez ce champ vide pour aucune valeur par défaut.
Options spéciales
- Ajouter une option « Autre » – Autoriser la saisie de texte personnalisée
- Étiquette de l'autre option – Personnalisez le texte « Autre » (par défaut : « Autre (veuillez préciser) »)
- Ajouter l'option « Aucune des réponses ci-dessus » – Ajouter un choix de non-sélection explicite à la fin
Fonctionnalités avancées
Ordre aléatoire – Afficher les options dans un ordre aléatoire (utile pour les enquêtes afin d'éviter les biais liés à l'ordre)
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
Autres Options
- Champ caché – Rendre le champ invisible mais inclure la valeur sélectionnée dans les soumissions
- Classes CSS personnalisées – Appliquer un style personnalisé
- Attributs d'accessibilité – Étiquettes et descriptions ARIA
Pourquoi choisir notre champ de boutons radio ?
✅ Layouts flexibles – Agencements verticaux, horizontaux ou en grille
✅ Fonctionnalités d'enquête – Randomiser l'ordre pour obtenir des résultats non biaisés
✅ Convivial – Option « Autre » pour les réponses personnalisées
✅ Contrôle complet – Options faciles d'ajout, de modification, de réorganisation et de suppression
✅ Paramètres par défaut intelligents – Présélectionnez les choix courants ou recommandés
✅ Professionel – « Aucune des réponses ci-dessus » pour les enquêtes appropriées
✅ Mobile optimisé – Tactile et avec des cibles tactiles parfaites
✅ Accessible – Prise en charge de la navigation au clavier et des lecteurs d’écran
✅ 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 boutons radio et les cases à cocher ?
Les boutons radio ne permettent qu'une seule sélection. Les cases à cocher permettent plusieurs sélections. Utilisez les boutons radio pour « choisissez-en un » et les cases à cocher pour « choisissez-en plusieurs ».
Q : Les utilisateurs peuvent-ils modifier leur sélection radio ?
Oui. La sélection d'une nouvelle option radio désélectionne automatiquement la précédente.
Q : Quand dois-je utiliser une disposition verticale plutôt qu'horizontale ?
Utilisez la disposition verticale pour les listes longues ou les étiquettes longues, la disposition horizontale pour les ensembles courts à deux ou trois options et la disposition en grille pour les groupes d'options de taille moyenne.
Q : Comment fonctionne l’option « Autre » ?
En sélectionnant « Autre », un champ de texte apparaît où les utilisateurs saisissent une réponse personnalisée. La sélection et le texte sont ensuite soumis.
Q : À quoi sert la fonction « randomiser l'ordre » ?
À chaque chargement du formulaire, l'ordre des options change afin de réduire les biais dans les réponses.
Q : Dois-je définir une sélection par défaut ?
Renseignez ce champ si vous souhaitez accélérer la saisie ou guider les utilisateurs. Laissez-le vide si vous souhaitez qu'ils fassent un choix délibéré.
Q : À quoi sert l'option « Aucune des réponses ci-dessus » ?
Elle permet aux utilisateurs d'indiquer qu'aucune option listée ne s'applique, améliorant ainsi la précision et évitant les réponses forcées.
Q : Puis-je avoir un texte d'affichage et des valeurs soumises différents ?
Oui. Le texte affiché est visible par les utilisateurs, et la valeur stockée dans les soumissions peut être plus claire ou mieux structurée.
Q : Comment puis-je réorganiser mes options de boutons radio ?
Utilisez les flèches haut et bas situées à côté de chaque option pour les déplacer dans l'ordre que vous préférez.
Q : Les boutons radio peuvent-ils être obligatoires ?
Oui. Activez l’option « Champ obligatoire » et les utilisateurs devront choisir une option avant de soumettre.
Q : Les boutons radio fonctionnent-ils sur mobile ?
Oui. Elles utilisent des commandes tactiles et s'empilent automatiquement à la verticale sur les petits écrans.
Q : Puis-je utiliser la logique conditionnelle avec des boutons radio ?
Oui. Afficher ou masquer les champs en fonction de l'option sélectionnée à l'aide de conditions « égal à » ou similaires.
