Bootstrap5 Kontrollkästchen und Optionsfelder

Wenn Sie möchten, dass Benutzer eine beliebige Anzahl von Optionen aus einer vordefinierten Liste auswählen, können Sie Checkboxen verwenden:

Beispiel

<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>

Selbst ausprobieren »

Checkboxen verwenden class="form-check", um korrekte Abstände zwischen dem Label und der Checkbox sicherzustellen.

Die Klasse .form-check-label wird zum label-Element hinzugefügt, und die Klasse .form-check-input wird innerhalb des .form-check-Containers hinzugefügt, um die Checkboxen zu gestalten.

Das Attribut checked wird verwendet, um die standardmäßig ausgewählte Option festzulegen.

Optionsfelder

Wenn Sie möchten, dass Benutzer eine Option aus einer vordefinierten Liste auswählen, können Sie Radiobuttons verwenden:

Beispiel

<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>

Selbst ausprobieren »

Umschalter

Wenn Sie ein Kontrollkästchen in einen Umschalter umwandeln möchten, können Sie.form-checkdie.form-switchKlasse innerhalb des Containers verwenden:

Beispiel

<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">Dunkelmodus</label> </div>

Selbst ausprobieren »
Andere Erweiterungen