मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
in English

चेक आ रेडियो

हमरऽ पूर्ण रूप स॑ पुनर्लिखित चेक घटक के साथ सुसंगत क्रॉस-ब्राउजर आरू क्रॉस-डिवाइस चेकबॉक्स आरू रेडियो बनाबै छै.

इस पेज पर

दृष्टिकोण

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

संरचनात्मक रूप स हमर <input>s आ s एकटा के भीतर एकटा <label>के विपरीत भाई-बहिन के तत्व अछि | ई कनेक बेसी वर्बोज अछि कारण अहाँकेँ निर्दिष्ट करबाक चाही आ विशेषता सभकेँ संबंधित करबाक लेल आ . हम अपन सब राज्य के लेल भाई-बहिन चयनकर्ता ( ) के उपयोग करैत छी, जेना या . जब॑ क्लास के साथ जोड़लऽ जाय छै त॑ हम्मं॑ आसानी स॑ हर आइटम के लेलऽ टेक्स्ट क॑ 's स्टेट के आधार प॑ स्टाइल करी सकै छियै ।<input><label>idfor<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(एकरा निर्दिष्ट करय कें लेल कोनों उपलब्ध एचटीएमएल विशेषता नहि छै).

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

पूर्वनिर्धारित (ढेर) 1।

डिफ़ॉल्ट रूप सं, कोनों संख्या मे चेकबॉक्स आ रेडियो जे तत्काल भाई-बहिन छै, लंबवत ढेर कैल जेतय आ उचित रूप सं .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;