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>

ทดสอบเองเลย