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>

جرب بنفسك