Bootstrap 5 flåder og radioknapper

Kontrolbokse

Hvis du ønsker, at brugeren kan vælge et antal valg fra en foruddefineret liste, skal du bruge kontrolbokse.

Eksempel

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

Prøv det selv

eksempel forklaring

Hvis du ønsker at indstille kontrolboksens stil, brug class="form-check" pakke element, for at sikre, at etiketten og kontrolboksen har passende margin.

derefter, tilføj .form-check-label klasse tilføje til etiket element, og derefter .form-check-input Tilføj til .form-check indeholder, for at korrekt indstille checkboxens stil.

Hvis du ønsker at markere checkboxen som standardvalgt, skal du bruge checked Egenskaber.

Radio knapper

Hvis du ønsker at begrænse brugeren til kun at kunne vælge en af foruddefinerede valgmuligheder, skal du bruge radio knapper.

Eksempel

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

Prøv det selv

skifteswitch

Hvis du ønsker at sættecheckboxen til at se som en skifteswitch, skal du bruge .form-switch Klasser og .form-check Kontainer sammen brug:

Eksempel

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

Prøv det selv