Cases à cocher et boutons radio Bootstrap 5

Recommandation de cours :

Case à cocher

Exemple

<div class="form-check">
  Si vous souhaitez que l'utilisateur puisse choisir un nombre quelconque d'options parmi une liste préétablie, utilisez le case à cocher.
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
</div>

Essayez-le vous-même

<label class="form-check-label">Option 1</label>

Exemple d'explication Pour configurer le style du case à cocher, utilisez class="form-check"

Ensuite, mettez la balise de包装元素, pour s'assurer que l'étiquette et le case à cocher ont une marge extérieure appropriée. .form-check-label Ajouter la classe à l'élément d'étiquette, et puis .form-check-input Ajouter à .form-check dans le conteneur pour configurer correctement le style de la case à cocher.

Si vous souhaitez que la case à cocher soit cochée par défaut, utilisez checked Attributs.

Bouton radio

Si vous souhaitez limiter les utilisateurs à choisir l'une des options préalablement définies, utilisez des boutons radio.

Exemple

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>Option 3
  <label class="form-check-label"></label>
</div>

Essayez-le vous-même

Interrupteur

Si vous souhaitez que la case à cocher soit de style interrupteur basculant, veuillez utiliser .form-switch Classe et .form-check Utilisation ensemble :

Exemple

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">Mode sombre</label>
</div>

Essayez-le vous-même