Bootrap 5 Check Box dan Radio Button

Kotak centang

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

实例

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

亲自试一试

contoh penjelasan

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

kemudian, tarik .form-check-label tambahkan class ke elemen label, dan lakukan .form-check-input Tambahkan .form-check 容器内，以正确设置复选框的样式。

如果您希望默认选中复选框，请使用 checked 属性。

单选按钮

如果您想限制用户只能从预设选项列表中选择其中之一，则使用单选按钮。

实例

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

亲自试一试

拨动开关

如果您希望将复选框设置为切换开关的样式，请将 .form-switch 类与 .form-check 容器一起使用：

实例

<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">深色模式</label>
</div>

亲自试一试