Bootstrap 5 復選框和單選按鈕

復選框

如果您希望用戶從預設選項列表中選擇任意數量的選項，則請使用復選框。

實例

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

親自試一試

例子解釋

如需設置復選框樣式，請使用 class="form-check" 的包裝元素，來確保標簽和復選框有適當的外邊距。

然后，將 .form-check-label 類添加到標簽元素，并將 .form-check-input 添加到 .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>

親自試一試