Checkbox at Radio Button ng Bootstrap 5

Mga checkbox

Kung gusto mong hayaang pilihin ng user ang anumang bilang ng mga opisyon mula sa listahan ng naunang mga opisyon, gamitin ang checkbox.

Halimbawa

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

Subukan Ngayon

Mga halimbawa ng paliwanag

Kung gusto mong itakda ang estilo ng checkbox, gamitin ang class="form-check" na naglalaman ng elemento, upang matiyak na ang tag at ang checkbox ay may tamang paghahalaga ng paghahalaga ng gilid.

Pagkatapos, magpakita ng .form-check-label Magdagdag ng klase sa elemento ng tag, at magpakita ng .form-check-input Magdagdag sa .form-check Sa loob ng container, upang maayos itong itakda ang estilo ng tsekbox.

Kung gusto mong i-set ang tsekbox bilang default na selected, gamitin ang: checked Atribute.

Mga Radio Button

Kung gusto mong limitahan ang pagpili ng user sa mga predetinadong opsyon, gamitin ang mga radio button.

Halimbawa

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

Subukan Ngayon

Pagpalit ng Switch

Kung gusto mong i-set ang tsekbox bilang estilo ng switch, maglagay ng: .form-switch Kasama ang .form-check Gumamit ng container:

Halimbawa

<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">Mga Dahilayan na Modo</label>
</div>

Subukan Ngayon