Composants - Formulaire
Case à cocher et radio
Ces deux éléments autorisent à faire un choix parmi plusieurs options.
La différence entre les deux réside dans le nombre d'options : le bouton radio n'autorise qu'un seul choix, alors que le checkbox autorise un ou plusieurs choix.
Les cases à cocher
Constituées par l'élément input type="checkbox", elles peuvent être uniques ou multiples.
Dans le cas d'un groupe de cases à cocher, elles doivent toutes être regroupées dans une balise fieldset, dont le premier enfant doit être un legend. Ce dernier constitue donc l'en-tête du groupe de cases à cocher, et doit décrire leur rôle.
Plusieurs mises en forme sont possibles.
Liste verticale
L'usage du div englobant de base avec les classes .custom-control.custom-checkbox ordonne verticalement les cases à cocher.
Liste horizontale
Pour une disposition horizontale, ajoutez la classe custom-control-inline aux deux classes déjà présentes sur l'élément parent.
Les boutons radios
Ils n'autorisent l'utilisateur qu'à sélectionner une seule option dans une liste.
Liste verticale
Comme pour les checkbox, la disposition par défaut est verticale.
Liste horizontale
Pour une disposition en ligne, ajouter sur chaque div parent la classe custom-control-inline aux deux préexistantes que sont custom-control et custom-radio.
Erreur
Si un bouton radio doit obligatoirement être sélectionné et que ce n'est pas le cas à l'envoi du formulaire, la méthode la plus robuste pour informer les lecteurs d'écran avec un timing adapté est d'ajouter le message d'erreur au contenu de <legend>.
Si le message d'erreur n'est pas visuellement proche de la légende, la technique est d'avoir 2 messages: un pour les lecteurs d'écran uniquement, dans la légende; et un affiché, pour les utilisateurs voyants, mais caché aux lecteurs d'écran pour éviter toute répétition. Voici un exemple :
Radio sous forme de boîte
Pour obtenir cette apparence, il faut englober l'ensemble des div.custom-radio.custom-control dans un parent portant la classe .custom-radio-box.
Radio sous forme de bouton
Pour obtenir cette apparence, il faut englober l'ensemble des div.custom-radio.custom-control dans un parent portant la classe .custom-radio-button.