Bootstrap5 Cases à cocher et boutons radio

Si vous souhaitez que les utilisateurs sélectionnent un nombre quelconque d'options dans une liste prédéfinie, vous pouvez utiliser des cases à cocher :

Exemple

<div class="form-check"> <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked> <label class="form-check-label">Option 1</label> </div>

Essayez-le vous-même »

Les cases à cocher utilisent class="form-check" pour garantir des marges appropriées entre le libellé et la case à cocher.

La classe .form-check-label est ajoutée à l'élément label, et la classe .form-check-input est ajoutée à l'intérieur du conteneur .form-check pour styliser les cases à cocher.

L'attribut checked est utilisé pour définir l'option sélectionnée par défaut.

Boutons radio

Si vous souhaitez que les utilisateurs sélectionnent une option dans une liste prédéfinie, vous pouvez utiliser 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 »

Interrupteurs à bascule

Si vous souhaitez transformer une case à cocher en interrupteur à bascule, vous pouvez.form-checkutiliser la.form-switchclasse dans le conteneur :

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 »
Autres extensions