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>

స్వయంగా ప్రయత్నించండి