Bootstrap 5 Checkbox en Radio Knoppen

Selectievakken

Als je wilt dat de gebruiker een willekeurig aantal opties uit een vooraf ingestelde lijst kiest, gebruik dan selectievakken.

Voorbeeld

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

Probeer het zelf

voorbeeld uitleg

Voor het instellen van de stijl van het selectievak, gebruik class="form-check" te waarborgen dat het label en de selectievakken de juiste marges hebben.

daarna, voeg de wrapper-elementen toe om .form-check-label klasse toevoegen aan het label-element en .form-check-input Toevoegen aan .form-check Binnen de container om de stijl van het keuzevak correct in te stellen.

Als je de keuzevakjes standaard wilt selecteren, gebruik dan gecontroleerd Eigenschappen.

Keuzevakjes

Als je de gebruiker wilt beperken tot het kiezen van één van de vooraf ingestelde opties, gebruik dan keuzevakjes.

Voorbeeld

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Optie 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">Optie 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>Optie 3
  <label class="form-check-label"></label>
</div>

Probeer het zelf

Schakelaar aan

Als je de keuzevakken wilt instellen als schakelaarsstijl, stel dan .form-switch Klassen en .form-check Gebruik van container samen:

Voorbeeld

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

Probeer het zelf