Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

الاختيارات (Checks و radios)

أنشئ مربعات اختيار (checkboxes) وأزرار اختيار (radios) متسقة عبر المتصفحات والأجهزة المختلفة باستخدام مكون الاختيارات الذي تمت إعادة كتابته بالكامل.

في هذه الصفحة

النهج

يتم استبدال مربعات الاختيار وأزرار الاختيار الافتراضية في المتصفح بمساعدة .form-check، وهي مجموعة من الفئات (classes) لكلا نوعي الإدخال والتي تعمل على تحسين تخطيط وسلوك عناصر HTML الخاصة بها، مما يوفر تخصيصاً أكبر واتساقاً عبر المتصفحات المختلفة. تُستخدم مربعات الاختيار (Checkboxes) لاختيار خيار واحد أو عدة خيارات من قائمة، بينما تُستخدم أزرار الاختيار (radios) لاختيار خيار واحد من بين خيارات متعددة.

من الناحية الهيكلية، تعتبر عناصر <input> و <label> عناصر شقيقة بدلاً من وجود <input> داخل <label>. هذا يجعل الكود أكثر تفصيلاً قليلاً حيث يجب عليك تحديد سمات id و for لربط <input> بـ <label>. نحن نستخدم محدد الشقيق (~) لجميع حالات <input> مثل :checked أو :disabled. وعند دمجها مع الفئة .form-check-label، يمكننا بسهولة تنسيق النص لكل عنصر بناءً على حالة <input>.

تستخدم الاختيارات لدينا أيقونات الـ (Bootstrap) مخصصة للإشارة إلى الحالات المحددة (checked) أو غير المحددة (indeterminate).

الإختيار (Checks)

html 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkDefault">
  <label class="form-check-label" for="checkDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
  <label class="form-check-label" for="checkChecked">
    Checked checkbox
  </label>
</div>

الحالة الغير محددة (Indeterminate)

يمكن لمربعات الاختيار (Checkboxes) استخدام الفئة الوهمية (pseudo class) :indeterminate عند تعيينها يدوياً عبر JavaScript (لا توجد سمة HTML متاحة لتحديد هذه الحالة).

html 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
  <label class="form-check-label" for="checkIndeterminate">
    Indeterminate checkbox
  </label>
</div>

تعطيل (Disabled)

أضف السمة disabled وسيتم تنسيق عناصر <label> المرتبطة بها تلقائياً بلون أفتح للمساعدة في الإشارة إلى حالة حقل الإدخال.

html 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkIndeterminateDisabled" disabled>
  <label class="form-check-label" for="checkIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
  <label class="form-check-label" for="checkDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
  <label class="form-check-label" for="checkCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

الإختيار (Radios)

html 
<div class="form-check">
  <input class="form-check-input" type="radio" name="radioDefault" id="radioDefault1">
  <label class="form-check-label" for="radioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radioDefault" id="radioDefault2" checked>
  <label class="form-check-label" for="radioDefault2">
    Default checked radio
  </label>
</div>

تعطيل

أضف السمة disabled، وسيتم تنسيق عناصر <label> المرتبطة بها تلقائياً بلون أفتح للمساعدة في توضيح حالة حقل الإدخال.

html 
<div class="form-check">
  <input class="form-check-input" type="radio" name="radioDisabled" id="radioDisabled" disabled>
  <label class="form-check-label" for="radioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radioDisabled" id="radioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="radioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

مفاتيح (Switches)

يستخدم المفتاح (Switch) بنية ترميز (markup) خاصة بمربع اختيار مخصص، ولكنه يستخدم الفئة (class) .form-switch لعرضه كمفتاح تبديل (toggle switch). يُنصح باستخدام role="switch" لنقل طبيعة عنصر التحكم بشكل أكثر دقة إلى التقنيات المساعدة التي تدعم هذا الدور. أما في التقنيات المساعدة الأقدم، فسيتم الإعلان عنه ببساطة كمربع اختيار عادي كحل احتياطي. كما تدعم المفاتيح (Switches) السمة disabled.

html 
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
  <label class="form-check-label" for="switchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
  <label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDisabled" disabled>
  <label class="form-check-label" for="switchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="switchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

المفاتيح الأصلية

قم بتحسين مفاتيحك (switches) تدريجياً في Safari للأجهزة المحمولة (iOS 17.4+) من خلال إضافة السمة switch إلى حقل الإدخال الخاص بك لتمكين التغذية اللمسية (haptic feedback) عند تبديل المفاتيح، تماماً كما هو الحال في مفاتيح iOS الأصلية. لا توجد أي تغييرات في الأنماط مرتبطة باستخدام هذه السمة في الـ Bootstrap، لأن جميع مفاتيحنا تستخدم أنماطاً مخصصة.

html 
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" value="" id="checkNativeSwitch" switch>
  <label class="form-check-label" for="checkNativeSwitch">
    Native switch haptics
  </label>
</div>

احرص على قراءة المزيد حول السمة switch في مدونة WebKit. يوفر +Safari 17.4 على كلٍّ من macOS وiOS مفاتيح (switches) ذات نمط أصلي في HTML، بينما تعود المتصفحات الأخرى ببساطة إلى مظهر مربع الاختيار القياسي. سيؤدي تطبيق هذه السمة على مربع اختيار غير تابع للـ Bootstrap في الإصدارات الأحدث من Safari إلى عرض مفتاح أصلي (native switch).

الافتراضي مُكدس/رأسياً

بشكل افتراضي، سيتم تكديس أي عدد من مربعات الاختيار (checkboxes) وأزرار الاختيار (radios) التي تكون أشقاء مباشرين عمودياً، مع تطبيق التباعد المناسب باستخدام .form-check.

html 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
html 
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

على نفس السطر أفقياً (Inline)

قم بتجميع مربعات الاختيار (checkboxes) أو أزرار الاختيار (radios) على نفس الصف الأفقي عن طريق إضافة .form-check-inline إلى أي .form-check.

html 
<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">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">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
html 
<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">1</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">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

عكس الإتجاه

ضع مربعات الاختيار (checkboxes) وأزرار الاختيار (radios) والمفاتيح (switches) على الجانب المقابل باستخدام الفئة (class) المعدِّلة .form-check-reverse.

html 
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="switchCheckReverse">
  <label class="form-check-label" for="switchCheckReverse">Reverse switch checkbox input</label>
</div>

بدون تسميات

تجاهل التغليف بـ .form-check لمربعات الاختيار (checkboxes) وأزرار الاختيار (radios) التي ليس لها نص تسمية. تذكر دائماً توفير شكل من أشكال الاسم الميسّر للتقنيات المساعدة (على سبيل المثال، باستخدام aria-label). راجع قسم إمكانية الوصول في نظرة عامة على النماذج لمزيد من التفاصيل.

html 
<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

أزرار التبديل (Toggle buttons)

أنشئ مربعات اختيار وأزرار اختيار تشبه الأزرار باستخدام أنماط .btn بدلاً من .form-check-label في عناصر <label>. يمكن تجميع أزرار التبديل هذه بشكل أكبر في مجموعة أزرار إذا لزم الأمر.

أزرار تبديل مربعات الاختيار (Checkbox toggle buttons)

html 
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
html 
<input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
<label class="btn" for="btn-check-4">Single toggle</label>

<input type="checkbox" class="btn-check" id="btn-check-5" checked autocomplete="off">
<label class="btn" for="btn-check-5">Checked</label>

<input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled>
<label class="btn" for="btn-check-6">Disabled</label>

من الناحية المرئية، تتطابق أزرار تبديل مربعات الاختيار هذه مع أزرار التبديل الخاصة بإضافة الأزرار (button plugin). ومع ذلك، يتم تقديمها بشكل مختلف للتقنيات المساعدة؛ حيث ستُعلن قارئات الشاشة عن تبديلات مربعات الاختيار على أنها "محدد" / "غير محدد" (لأنها، رغم مظهرها، لا تزال في جوهرها مربعات اختيار)، بينما ستُعلن أزرار التبديل الخاصة بإضافة الأزرار على أنها "زر" / "زر تم الضغط عليه". يعتمد الاختيار بين هذين النهجين على نوع التبديل الذي تقوم بإنشائه، وما إذا كان التبديل سيبدو منطقياً للمستخدمين عند الإعلان عنه كمربع اختيار أم كزر فعلي.

أزرار التبديل وأزرار الاختيار

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

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

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>
html 
<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
<label class="btn" for="option5">Checked</label>

<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
<label class="btn" for="option6">Radio</label>

<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
<label class="btn" for="option7">Disabled</label>

<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
<label class="btn" for="option8">Radio</label>

الأنماط ذات الحدود/المفرغة

يتم دعم المتغيرات المختلفة لـ .btn مثل أنماط الحدود (outlined styles) المتنوعة.



html 
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

الـ (CSS)

متغيرات الـ (Sass)

متغيرات الإختيار (Checks)

scss/_variables.scss 
$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $focus-ring-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;

متغيرات الإختيار (switches)

scss/_variables.scss 
$form-switch-color:               rgba($black, .25);
$form-switch-width:               2em;
$form-switch-padding-start:       $form-switch-width + .5em;
$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
$form-switch-border-radius:       $form-switch-width;
$form-switch-transition:          background-position .15s ease-in-out;

$form-switch-focus-color:         $input-focus-border-color;
$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");

$form-switch-checked-color:       $component-active-color;
$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");
$form-switch-checked-bg-position: right center;