Bootstrap 5 Checkbox và Radio button

Hộp kiểm

Nếu bạn muốn người dùng chọn số lượng tùy chọn từ danh sách tùy chọn预设, hãy sử dụng hộp kiểm.

Mẫu

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">Tùy chọn 1</label>
</div>

Thử trực tiếp

ví dụ minh họa

Nếu bạn muốn thiết lập樣式 hộp kiểm, hãy sử dụng class="form-check" để đảm bảo rằng thẻ và hộp kiểm có khoảng cách ngoài hợp lý.

thêm vào phần bao bọc của .form-check-label thêm lớp class vào thẻ yếu tố, và然后将 .form-check-input thêm vào .form-check trong container để thiết lập đúng phong cách của ô chọn.

Nếu bạn muốn thiết lập ô chọn được chọn mặc định, hãy sử dụng checked Thuộc tính.

Nút radio

Nếu bạn muốn giới hạn người dùng chỉ có thể chọn một trong số các tùy chọn đã định trước, hãy sử dụng nút radio.

Mẫu

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

Thử trực tiếp

togle

Nếu bạn muốn thiết lập ô chọn như phong cách của nút chuyển đổi, hãy đặt .form-switch Loại với .form-check Đùng chung container:

Mẫu

<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">Chế độ tối</label>
</div>

Thử trực tiếp