Checkbox và radio button là những thành phần quan trọng trong các biểu mẫu, giúp người dùng chọn một hoặc nhiều tùy chọn. Bootstrap 5 cung cấp các class tiện ích mạnh mẽ để dễ dàng tạo và tùy chỉnh checkbox và radio button, giúp giao diện biểu mẫu trở nên gọn gàng, đồng nhất, và thân thiện với người dùng. Trong bài viết này, CodeTutHub sẽ giới thiệu cách sử dụng và tùy chỉnh Checkbox và Radio Button trong Bootstrap 5, bao gồm các trạng thái, căn chỉnh, tùy chọn không thể chọn (disabled), và nhóm (inline).

1. Checkbox và Radio Button

Để tạo checkbox và radio button cơ bản trong Bootstrap 5, bạn sử dụng các class form-check, form-check-input, và form-check-label để đảm bảo các thành phần có kiểu dáng đồng nhất và chuyên nghiệp.

Ví dụ Checkbox và Radio

html
Thử online
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check1">
    <label class="form-check-label" for="check1">Chọn tùy chọn này</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="radioOptions" id="radio1" checked>
    <label class="form-check-label" for="radio1">Lựa chọn 1</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="radioOptions" id="radio2">
    <label class="form-check-label" for="radio2">Lựa chọn 2</label>
</div>

2. Checkbox và Radio Inline (trên cùng một dòng)

Để hiển thị các checkbox hoặc radio trên cùng một dòng, Bootstrap cung cấp class form-check-inline. Class này giúp xếp các checkbox hoặc radio button ngang hàng, rất hữu ích khi cần tạo biểu mẫu gọn gàng.

Ví dụ Checkbox và Radio Inline

html
Thử online
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">Tùy chọn 1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">Tùy chọn 2</label>
</div>

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">Lựa chọn A</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    <label class="form-check-label" for="inlineRadio2">Lựa chọn B</label>
</div>

3. Checkbox và Radio không thể chọn (Disabled)

Bootstrap cho phép bạn sử dụng thuộc tính disabled để vô hiệu hóa các checkbox và radio button. Tùy chọn này rất hữu ích khi bạn muốn hiển thị các lựa chọn nhưng không cho phép người dùng chọn.

Ví dụ Disabled Checkbox và Radio

html
Thử online
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="disabledCheckbox" disabled>
    <label class="form-check-label" for="disabledCheckbox">Tùy chọn không thể chọn</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="disabledRadioOptions" id="disabledRadio1" disabled>
    <label class="form-check-label" for="disabledRadio1">Lựa chọn không thể chọn</label>
</div>

4. Checkbox và Radio với Custom Styles

Bootstrap 5 cung cấp các class tùy chỉnh cho checkbox và radio button, giúp thay đổi giao diện từ hình vuông thành các hình dáng khác nhau. Các class form-check-input mặc định cũng hỗ trợ các hiệu ứng về trạng thái chọn (checked), không chọn (unchecked), và không thể chọn (disabled) để tăng tính thẩm mỹ cho giao diện.

Ví dụ Custom Checkbox và Radio

Bootstrap sử dụng CSS tùy chỉnh để tạo phong cách cho checkbox và radio. Tuy nhiên, bạn cũng có thể điều chỉnh thêm với CSS nếu cần thiết.

5. Validation cho Checkbox và Radio

Bootstrap hỗ trợ xác thực cho checkbox và radio với các class is-valid và is-invalid. Điều này cho phép bạn hiển thị các trạng thái hợp lệ và không hợp lệ cho các tùy chọn trong form.

Ví dụ Validation cho Checkbox và Radio

html
Thử online
<div class="form-check">
    <input class="form-check-input is-valid" type="checkbox" id="validCheckbox">
    <label class="form-check-label" for="validCheckbox">Tùy chọn hợp lệ</label>
</div>
<div class="form-check">
    <input class="form-check-input is-invalid" type="radio" name="validationRadioOptions" id="invalidRadio">
    <label class="form-check-label" for="invalidRadio">Lựa chọn không hợp lệ</label>
    <div class="invalid-feedback">Vui lòng chọn một tùy chọn hợp lệ.</div>
</div>

Trong ví dụ trên, class is-valid hiển thị trạng thái hợp lệ cho checkbox, trong khi class is-invalid và invalid-feedback hiển thị trạng thái và thông báo lỗi cho radio button không hợp lệ.

6. Checkbox và Radio Toggle Buttons

Bootstrap 5 còn cung cấp tính năng Toggle Buttons cho checkbox và radio button, cho phép bạn biến các checkbox và radio thành các nút có thể nhấn để chọn hoặc bỏ chọn.

Ví dụ Toggle Buttons

html
Thử online
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Nút Toggle</label>

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="option1">Radio 1</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-outline-secondary" for="option2">Radio 2</label>

Trong ví dụ này:

  • btn-check biến checkbox hoặc radio thành nút có thể bật hoặc tắt.
  • btn-outline-primary và btn-outline-secondary là các class Bootstrap giúp tạo kiểu cho nút toggle.

Kết luận

Với Bootstrap 5, bạn có thể dễ dàng tạo và tùy chỉnh checkbox và radio button với nhiều tính năng từ các class căn chỉnh, inline, trạng thái không thể chọn (disabled), đến toggle buttons. Sử dụng các thành phần này giúp biểu mẫu của bạn gọn gàng, dễ nhìn và thân thiện với người dùng. Hãy áp dụng các ví dụ từ bài viết này để tạo checkbox và radio button chuyên nghiệp và hiệu quả trên trang web của bạn!