Bootstrap 5 valintaruudut ja valintapainikkeet

Valintaruudut

Jos haluat, että käyttäjä voi valita minkä tahansa määrän valintoja etukäteen määritellystä valintalistasta, käytä valintaruutuja.

Esimerkki

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

Kokeile itse

esimerkki selityksestä

Jos haluat asettaa valintaruudun tyylit, käytä class="form-check" pakkauselementti, jotta merkintä ja valintaruutu ovat sopivan reunan etäisyydellä.

Sitten, lisää .form-check-label luokan lisääminen merkintäelementtiin ja varmista, että .form-check-input Lisää .form-check sisällä, jotta valintaruudun tyyli asetetaan oikein.

Jos haluat valita oletuksena valintaruudun, käytä checked Atribuutit.

Valintapainike

Jos haluat rajoittaa käyttäjien valinnan vain etukäteen määritettyihin vaihtoehtoihin, käytä valintapainiketta.

Esimerkki

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

Kokeile itse

kytkin

Jos haluat asettaa valintaruudun vaihtimen tyyliin, aseta .form-switch Luokat ja .form-check Yhdessä käytettävät kontit:

Esimerkki

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

Kokeile itse