Skip to Content
BootstrapPartie 6 — Formulaires6.2 — Checks, radios, switches, range

6.2 — Checks, radios, switches, range

⏱️ TL;DR — Une case ou un radio = .form-check (conteneur) + .form-check-input + .form-check-label. Ajouter .form-switch transforme la case en interrupteur. Un curseur = .form-range. On peut afficher les cases en ligne (form-check-inline) ou en boutons (btn-check).

🎯 Objectifs

  • Créer cases, radios et switches accessibles.
  • Disposer les choix en ligne ou en boutons.
  • Ajouter un curseur (range).

Case à cocher

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="c1" checked>
  <label class="form-check-label" for="c1">J'accepte</label>
</div>

Radios

<div class="form-check">
  <input class="form-check-input" type="radio" name="choix" id="r1" checked>
  <label class="form-check-label" for="r1">Option A</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="choix" id="r2">
  <label class="form-check-label" for="r2">Option B</label>
</div>

Le même name regroupe les radios (un seul sélectionnable).

Switch

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="s1">
  <label class="form-check-label" for="s1">Notifications</label>
</div>

En ligne

<div class="form-check form-check-inline">…</div>
<div class="form-check form-check-inline">…</div>

Boutons à bascule (btn-check)

<input type="checkbox" class="btn-check" id="btncheck" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck">Activer</label>

btn-check transforme une case en bouton visuel (toggle) — pratique pour des filtres.

Range

<label for="vol" class="form-label">Volume</label>
<input type="range" class="form-range" id="vol" min="0" max="100" step="10">

⚠️ Piège — Oublier role="switch" sur un switch : visuellement c’est un interrupteur, mais un lecteur d’écran l’annonce comme une simple case. Ajoutez role="switch".

💡 Pour un dev React — checked + onChange sur form-check-input comme d’habitude. Pour un groupe de radios contrôlé, gérez une seule valeur d’état et comparez-la à chaque value. btn-check reste 100 % CSS, aucun JS Bootstrap requis.

✏️ Exercices

  1. Un interrupteur « Mode sombre » accessible.

✅ Solution

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="dark">
  <label class="form-check-label" for="dark">Mode sombre</label>
</div>
  1. Trois options exclusives affichées en ligne.

✅ Solution

Trois .form-check.form-check-inline avec des radios partageant le même name.

🧠 Quiz de révision

1. Quelle classe conteneur pour une case/radio ?

form-check.

2. Comment transformer une case en interrupteur ?

Ajouter form-switch (et role="switch" sur l’input).

3. Comment regrouper des radios ?

Leur donner le même attribut name.

4. Quelle classe pour un curseur ?

form-range.

5. Que fait btn-check ?

Il transforme une case/radio en bouton visuel (toggle).

Chapitre suivant : 6.3 — Input group & floating labels

6.1 — Form controls & select6.3 — Input group & floating labels