मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

चेक और रेडियो

हमारे पूरी तरह से फिर से लिखे गए चेक घटक के साथ लगातार क्रॉस-ब्राउज़र और क्रॉस-डिवाइस चेकबॉक्स और रेडियो बनाएं।

इस पृष्ठ पर

दृष्टिकोण

ब्राउज़र डिफ़ॉल्ट चेकबॉक्स और रेडियो की मदद से प्रतिस्थापित किया जाता है .form-check, दोनों इनपुट प्रकारों के लिए कक्षाओं की एक श्रृंखला जो उनके HTML तत्वों के लेआउट और व्यवहार में सुधार करती है, जो अधिक अनुकूलन और क्रॉस ब्राउज़र स्थिरता प्रदान करती है। चेकबॉक्स एक सूची में एक या कई विकल्प चुनने के लिए होते हैं, जबकि रेडियो कई विकल्पों में से एक विकल्प चुनने के लिए होते हैं।

संरचनात्मक रूप से, हमारे <input>s और <label>s सहोदर तत्व हैं जो <input>a के भीतर के विपरीत हैं <label>। यह थोड़ा अधिक वर्बोज़ है क्योंकि आपको निर्दिष्ट करना होगा idऔर forविशेषताओं को और से संबंधित <input>करना होगा <label>। हम अपने सभी राज्यों, जैसे या के लिए सिबलिंग सिलेक्टर ( ~) का उपयोग करते हैं । कक्षा के साथ संयुक्त होने पर , हम स्थिति के आधार पर प्रत्येक आइटम के लिए टेक्स्ट को आसानी से स्टाइल कर सकते हैं ।<input>:checked:disabled.form-check-label<input>

हमारे चेक चेक किए गए या अनिश्चित राज्यों को इंगित करने के लिए कस्टम बूटस्ट्रैप आइकन का उपयोग करते हैं।

चेकों

<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 विशेषता उपलब्ध नहीं है)।

<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 को हल्के रंग से मिलान करने के लिए स्वचालित रूप से स्टाइल किया जाता है।

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

रेडियो

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

अक्षम

विशेषता जोड़ें disabledऔर इनपुट की स्थिति को इंगित करने में सहायता के लिए संबंधित <label>s को हल्के रंग से मिलान करने के लिए स्वचालित रूप से स्टाइल किया जाता है।

<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विशेषता का समर्थन करते हैं।

<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.

<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>
<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.

<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>
<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जिनमें कोई लेबल टेक्स्ट नहीं है। aria-labelसहायक तकनीकों (उदाहरण के लिए, का उपयोग करके ) के लिए अभी भी कुछ प्रकार के सुलभ नाम प्रदान करना याद रखें । विवरण के लिए प्रपत्र अवलोकन अभिगम्यता अनुभाग देखें।

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

चेकबॉक्स टॉगल बटन

<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>
दिखने में, ये चेकबॉक्स टॉगल बटन बटन प्लग इन टॉगल बटन के समान होते हैं । हालांकि, उन्हें सहायक तकनीकों द्वारा अलग-अलग तरीके से बताया जाता है: स्क्रीन रीडर द्वारा चेकबॉक्स टॉगल की घोषणा "चेक" / "चेक नहीं की गई" के रूप में की जाएगी (क्योंकि, उनकी उपस्थिति के बावजूद, वे मूल रूप से अभी भी चेकबॉक्स हैं), जबकि बटन प्लगइन टॉगल बटन होंगे "बटन" / "बटन दबाया" के रूप में घोषित किया गया। इन दो दृष्टिकोणों के बीच चुनाव आपके द्वारा बनाए जा रहे टॉगल के प्रकार पर निर्भर करेगा, और जब चेकबॉक्स या वास्तविक बटन के रूप में घोषित किया जाता है तो टॉगल उपयोगकर्ताओं को समझ में आता है या नहीं।

रेडियो टॉगल बटन

<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, जैसे कि विभिन्न उल्लिखित शैलियों का समर्थन किया जाता है।



<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 10l3 3l6-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;