Bootstrap 5-Kontrollkästchen und Optionsfelder

Kontrollkästchen

Wenn Sie möchten, dass der Benutzer aus einer vorgegebenen Liste von Optionen eine beliebige Anzahl auswählt, verwenden Sie bitte Kontrollkästchen.

Beispiel

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

Probieren Sie es selbst aus

Beispiel erläutert

Um den Stil des Kontrollkästchens zu setzen, verwenden Sie class="form-check" den Wrapper-Element, um sicherzustellen, dass das Etikett und der Kontrollkästchen angemessene Außenabstände haben.

Dann fügen Sie .form-check-label Klasse hinzufügen zum Etikettenelement und fügen Sie .form-check-input Hinzufügen .form-check im Container, um das richtige Stil der Checkbox zu setzen.

Wenn Sie möchten, dass die Checkbox standardmäßig ausgewählt ist, verwenden Sie checked Eigenschaften.

Auswahlknöpfe

Wenn Sie möchten, dass Benutzer nur aus einer vorgegebenen Liste von Optionen auswählen können, verwenden Sie Auswahlknöpfe.

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>

Probieren Sie es selbst aus

Schalter um

Wenn Sie die Checkbox in das Stil des Toggle-Schalters setzen möchten, fügen Sie .form-switch Klassen und .form-check Container gemeinsam 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>

Probieren Sie es selbst aus