Bootstrap 5 Hộp kiểm và nút Radio
Hộp kiểm
Hộp kiểm được sử dụng nếu bạn muốn người dùng chọn bất kỳ số lượng tùy chọn nào từ danh sách các tùy chọn đặt trước.
Ví dụ
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1" name="option1"
value="something" checked>
<label
class="form-check-label">Option 1</label>
</div>
Hãy tự mình thử »Ví dụ giải thích
Để tạo kiểu cho các hộp kiểm, hãy sử dụng phần tử trình bao bọc có class="form-check"
để đảm bảo lề thích hợp cho nhãn và hộp kiểm.
Sau đó, thêm lớp .form-check-label
vào các thành phần nhãn và .form-check-input
để tạo kiểu cho các hộp kiểm bên trong vùng chứa .form-check
.
Sử dụng thuộc tính checked
nếu bạn muốn hộp kiểm được chọn theo mặc định.
Nút radio
Nút radio được sử dụng nếu bạn muốn giới hạn người dùng chỉ một lựa chọn từ danh sách các tùy chọn đặt trước.
Ví dụ
<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>
Hãy tự mình thử »Chuyển đổi công tắc
Nếu bạn muốn hộp kiểm của mình được tạo kiểu như một công tắc bật tắt, hãy sử dụng lớp .form-switch
cùng với vùng chứa .form-check
:
Ví dụ
<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>
Hãy tự mình thử »