Formulaires

Cases et boutons radio

Les classes .form-check et .form-check-input mettent en forme les cases à cocher, les boutons radio et les interrupteurs. Elles s’appuient sur les éléments natifs pour garder clavier et lecteurs d’écran.

Cases à cocher#

Chaque case est un .form-check contenant un .form-check-input et un .form-check-label relié par for. Une case sert à activer une option indépendante ; plusieurs peuvent être cochées.

J'accepte les conditions générales de la banque

Recevoir une alerte SMS à chaque opération

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="case-cgu">
  <label class="form-check-label" for="case-cgu">J'accepte les conditions générales de la banque</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="case-alertes" checked>
  <label class="form-check-label" for="case-alertes">Recevoir une alerte SMS à chaque opération</label>
</div>

État indéterminé et désactivé#

L’état indéterminé se règle uniquement en JavaScript (input.indeterminate = true). Il sert à représenter une sélection partielle, par exemple une case « Tout sélectionner ».

Sélectionner tous les virements du mois

Option indisponible pour ce compte

Assurance de base incluse

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="case-indetermine">
  <label class="form-check-label" for="case-indetermine">Sélectionner tous les virements du mois</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="case-desactivee" disabled>
  <label class="form-check-label" for="case-desactivee">Option indisponible pour ce compte</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="case-desactivee-cochee" checked disabled>
  <label class="form-check-label" for="case-desactivee-cochee">Assurance de base incluse</label>
</div>

Boutons radio#

Les boutons radio d’un même groupe partagent le même name : un seul peut être choisi. Entourez-les d’un <fieldset> avec une <legend>.

Mode de réception du relevé

Par e-mail

Retrait en agence

Par courrier (indisponible)

<fieldset>
  <legend class="fs-6 fw-semibold">Mode de réception du relevé</legend>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="case-releve" id="case-releve-email" checked>
    <label class="form-check-label" for="case-releve-email">Par e-mail</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="case-releve" id="case-releve-agence">
    <label class="form-check-label" for="case-releve-agence">Retrait en agence</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="case-releve" id="case-releve-poste" disabled>
    <label class="form-check-label" for="case-releve-poste">Par courrier (indisponible)</label>
  </div>
</fieldset>

Interrupteurs#

Ajoutez .form-switch au conteneur et role="switch" à la case pour un interrupteur. Utilisez-le pour un réglage appliqué tout de suite (activer, désactiver), pas pour un choix à valider par un bouton.

Paiements sur internet

Paiements à l'étranger

Carte verrouillée par l'agence

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="case-sw-ligne" checked>
  <label class="form-check-label" for="case-sw-ligne">Paiements sur internet</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="case-sw-etranger">
  <label class="form-check-label" for="case-sw-etranger">Paiements à l'étranger</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="case-sw-verrou" disabled>
  <label class="form-check-label" for="case-sw-verrou">Carte verrouillée par l'agence</label>
</div>

Alignement en ligne#

.form-check-inline place les options sur une même ligne. Réservez cette disposition aux libellés courts.

Situation familiale

Célibataire

Marié(e)

Autre

<fieldset>
  <legend class="fs-6 fw-semibold">Situation familiale</legend>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="case-situation" id="case-sit-celib" checked>
    <label class="form-check-label" for="case-sit-celib">Célibataire</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="case-situation" id="case-sit-marie">
    <label class="form-check-label" for="case-sit-marie">Marié(e)</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="case-situation" id="case-sit-autre">
    <label class="form-check-label" for="case-sit-autre">Autre</label>
  </div>
</fieldset>

Case à droite du libellé#

.form-check-reverse inverse l’ordre : la case passe à droite et le libellé s’aligne sur le bord gauche. Pratique pour une liste d’options alignées sur la marge.

Alertes par SMS

Alertes par e-mail

Notifications de l'application

<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="case-rev-sms">
  <label class="form-check-label" for="case-rev-sms">Alertes par SMS</label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="case-rev-mail" checked>
  <label class="form-check-label" for="case-rev-mail">Alertes par e-mail</label>
</div>
<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" role="switch" id="case-rev-push" checked>
  <label class="form-check-label" for="case-rev-push">Notifications de l'application</label>
</div>

Sans libellé visible#

Une case sans texte visible (colonne de sélection d’un tableau) doit conserver un nom accessible : utilisez aria-label.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="case-ligne" aria-label="Sélectionner le virement du 3 mars, 75 000 FCFA">
</div>

Boutons à bascule#

Associez .btn-check à un <label class="btn"> pour obtenir des boutons qui se cochent comme des cases ou des radios. La case reste le vrai contrôle ; le libellé est son habillage.

Épargne automatique

7 jours 30 jours 90 jours

<input type="checkbox" class="btn-check" id="case-btn-epargne" autocomplete="off">
<label class="btn btn-outline-primary" for="case-btn-epargne">Épargne automatique</label>

<div class="mt-3" role="group" aria-label="Période d'affichage des opérations">
  <input type="radio" class="btn-check" name="case-periode" id="case-periode-7" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="case-periode-7">7 jours</label>
  <input type="radio" class="btn-check" name="case-periode" id="case-periode-30" autocomplete="off">
  <label class="btn btn-outline-primary" for="case-periode-30">30 jours</label>
  <input type="radio" class="btn-check" name="case-periode" id="case-periode-90" autocomplete="off">
  <label class="btn btn-outline-primary" for="case-periode-90">90 jours</label>
</div>

Classes de cases et de radios

Classes de cases et de radios
Classe	Effet
`.form-check`	Conteneur : espace pour la case et aligne le libellé.
`.form-check-input`	La case, le bouton radio ou l’interrupteur (`type="checkbox"` ou `type="radio"`).
`.form-check-label`	Libellé cliquable, grisé automatiquement si le champ est désactivé.
`.form-switch`	À ajouter à `.form-check` pour afficher un interrupteur.
`.form-check-inline`	Place les options sur une même ligne.
`.form-check-reverse`	Inverse la position de la case et du libellé.
`.btn-check`	Masque la case et laisse le `<label class="btn">` jouer le rôle de bouton.

Bonnes pratiques

À faire

Rédigez des libellés complets et cliquables : toute la ligne doit activer la case.
Utilisez des radios pour un choix unique parmi peu d’options, des cases pour des choix indépendants.
Cochez par défaut l’option la plus sûre ou la plus courante, jamais une acceptation juridique.
Utilisez un interrupteur pour un réglage immédiat, avec un retour visible (message ou état).

À éviter

Ne précochez pas une case de consentement commercial ou d’acceptation des conditions.
Ne présentez pas deux options exclusives avec des cases à cocher.
N’alignez pas en ligne plus de trois options ni des libellés longs.

Accessibilité

Chaque case ou radio a un <label> relié par for ; sans texte visible, ajoutez aria-label.
Groupez les radios et cases liées dans un <fieldset> avec <legend> (ou role="group" et aria-label pour les boutons).
Ajoutez role="switch" aux interrupteurs pour que le lecteur d’écran annonce « activé » ou « désactivé ».
Ne retirez pas le contour de focus des boutons .btn-check : il apparaît sur le libellé.