Bootstrap 5 kryssrutor och radioknappar

Kryssrutor

Om du vill att användaren ska kunna välja ett antal alternativ från en förinställd lista, använd kryssrutor.

Exempel

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

Prova själv

exempel förklaring

För att ställa in kryssrute-stylen, använd class="form-check" omfattande element för att säkerställa att etiketten och kryssrutan har lämplig marginal.

därefter .form-check-label klassen till etikettlementet och sätt .form-check-input Lägg till .form-check inuti behållaren för att korrekt ställa in kryssrutans stil.

Om du vill att kryssrutan ska vara förvald, använd checked egenskaper.

Rutor

Om du vill begränsa användarens val till en fördefinierad lista av alternativ, använd rutor.

Exempel

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

Prova själv

väljknapp

Om du vill sätta in kryssrutan i stilen för växelskärm, sätt .form-switch Klasser och .form-check Använda behållare tillsammans:

Exempel

<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">Mörk mode</label>
</div>

Prova själv