Kotak Centang dan Tombol Radio Bootstrap 5

Kotak centang

Jika Anda ingin pengguna memilih jumlah pilihan apapun dari daftar pilihan yang disediakan, gunakan kotak centang.

Example

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

Try It Yourself

contoh penjelasan

Untuk mengatur gaya kotak centang, gunakan class="form-check" agar label dan kotak centang memiliki marjin yang sesuai.

kemudian, gunakan elemen pelengkap untuk .form-check-label tambahkan class ke elemen label, dan lalu .form-check-input Tambahkan ke .form-check Container inside, to correctly set the style of the checkbox.

If you want to default select the checkbox, please use Checked Properties.

Radio Buttons

If you want to limit users to only select one from the predefined option list, use radio buttons.

Example

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

Try It Yourself

Toggle Switch

If you want to set the checkbox to the style of the toggle switch, please set .form-switch Class with .form-check Container used together:

Example

<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">Dark Mode</label>
</div>

Try It Yourself