چیک اور ریڈیو

ہمارے مکمل طور پر دوبارہ لکھے گئے چیک کے جزو کے ساتھ مسلسل کراس براؤزر اور کراس ڈیوائس چیک باکس اور ریڈیو بنائیں۔

اس صفحہ پر

نقطہ نظر

براؤزر ڈیفالٹ چیک باکسز اور ریڈیوز کی مدد سے تبدیل کیے جاتے ہیں .form-check، دونوں قسم کے ان پٹ کے لیے کلاسز کا ایک سلسلہ جو ان کے HTML عناصر کی ترتیب اور رویے کو بہتر بناتا ہے، جو زیادہ حسب ضرورت اور کراس براؤزر مستقل مزاجی فراہم کرتا ہے۔ چیک باکسز ایک فہرست میں سے ایک یا کئی اختیارات کو منتخب کرنے کے لیے ہیں، جبکہ ریڈیو بہت سے اختیارات میں سے ایک اختیار کو منتخب کرنے کے لیے ہیں۔

ساختی طور پر، ہمارے <input>s اور <label>s بہن بھائی عناصر ہیں جو کہ <input>a کے اندر موجود <label>ہیں۔ یہ قدرے زیادہ لفظی ہے کیونکہ آپ کو اور سے متعلق ہونے کے لیے انتساب idاور خصوصیات کی وضاحت کرنی ہوگی ۔ ہم اپنی تمام ریاستوں کے لیے بہن بھائی سلیکٹر ( ) استعمال کرتے ہیں، جیسے یا . کلاس کے ساتھ مل کر ، ہم آسانی سے ہر آئٹم کے لیے ' کی حالت کی بنیاد پر متن کو اسٹائل کر سکتے ہیں۔for<input><label>~<input>:checked:disabled.form-check-label<input>

ہمارے چیک اپنی مرضی کے مطابق بوٹسٹریپ آئیکنز کو چیک شدہ یا غیر متعین حالتوں کی نشاندہی کرنے کے لیے استعمال کرتے ہیں۔

چیک کرتا ہے۔

ڈیفالٹ چیک باکس

چیک باکس کو نشان زد کیا۔

html

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

غیر متعین

جب جاوا اسکرپٹ کے ذریعے دستی طور پر سیٹ کیا جاتا ہے تو چیک باکسز :indeterminateسیوڈو کلاس کا استعمال کر سکتے ہیں (اس کی وضاحت کے لیے کوئی HTML وصف دستیاب نہیں ہے)۔

غیر متعین چیک باکس

html

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

معذور

disabledانتساب کو شامل کریں اور متعلقہ <label>s خود بخود ہلکے رنگ سے ملنے کے لیے اسٹائل کیے جاتے ہیں تاکہ ان پٹ کی حالت کو ظاہر کرنے میں مدد ملے۔

غیر متعین چیک باکس کو غیر فعال کر دیا گیا۔

غیر فعال چیک باکس

غیر فعال نشان زدہ چیک باکس

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

ریڈیوز

پہلے سے طے شدہ ریڈیو

ڈیفالٹ چیک شدہ ریڈیو

html

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

معذور

غیر فعال ریڈیو

غیر فعال چیک شدہ ریڈیو

html

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

سوئچز

ایک سوئچ میں حسب ضرورت چیک باکس کا مارک اپ ہوتا ہے لیکن .form-switchٹوگل سوئچ رینڈر کرنے کے لیے کلاس کا استعمال کرتا ہے۔ role="switch"اس کردار کی حمایت کرنے والی معاون ٹیکنالوجیز کو کنٹرول کی نوعیت کو زیادہ درست طریقے سے پہنچانے کے لیے استعمال کرنے پر غور کریں ۔ پرانی معاون ٹیکنالوجیز میں، اس کا اعلان فال بیک کے طور پر باقاعدہ چیک باکس کے طور پر کیا جائے گا۔ سوئچ بھی disabledخصوصیت کی حمایت کرتے ہیں۔

ڈیفالٹ سوئچ چیک باکس ان پٹ

چیک شدہ سوئچ چیک باکس ان پٹ

غیر فعال سوئچ چیک باکس ان پٹ

غیر فعال چیک کردہ سوئچ چیک باکس ان پٹ

html

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

ڈیفالٹ (اسٹیکڈ)

پہلے سے طے شدہ طور پر، کسی بھی تعداد میں چیک باکسز اور ریڈیو جو فوری طور پر بہن بھائی ہیں عمودی طور پر اسٹیک کیے جائیں گے اور مناسب طور پر اس کے ساتھ فاصلہ رکھیں .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>

لائن میں

.form-check-inlineکسی بھی میں شامل کرکے ایک ہی افقی قطار میں چیک باکسز یا ریڈیوز کو گروپ کریں .form-check۔

3 (معذور)

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>

3 (معذور)

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>

معکوس

اپنے چیک باکسز، ریڈیوز، اور سوئچز کو .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="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>

لیبل کے بغیر

چیک باکسز اور ریڈیو کے لیے ریپنگ کو چھوڑ دیں .form-checkجن پر کوئی لیبل ٹیکسٹ نہیں ہے۔ 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>

ٹوگل بٹن

عناصر کے .btnبجائے اسٹائل کا استعمال کرکے بٹن نما چیک باکسز اور ریڈیو بٹن بنائیں ۔ اگر ضرورت ہو تو ان ٹوگل بٹنوں کو بٹن گروپ میں مزید گروپ کیا جا سکتا ہے ۔.form-check-label<label>

چیک باکس ٹوگل بٹن

سنگل ٹوگل

html

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

چیک کیا۔

html

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

معذور

html

<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="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>

خاکہ شدہ انداز

کی مختلف قسمیں .btn، جیسے کہ مختلف خاکہ شدہ طرزوں پر، تعاون یافتہ ہیں۔

سنگل ٹوگل
چیک کیا۔
کامیابی کا ریڈیو چیک کیا۔ خطرہ ریڈیو

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>

سس

متغیرات

$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:                 1px solid rgba($black, .25);
$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:       $input-btn-focus-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;