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>

अपने आप प्रयास कीजिए