चेक एवं रेडियो

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

इस पृष्ठ पर

समीपगमनम्‌

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

संरचनात्मकरूपेण अस्माकं <input>s तथा <label>s भ्रातृतत्त्वानि सन्ति यथा an <input>within a <label>. इदं किञ्चित् अधिकं वाचिकं यतः भवद्भिः निर्दिष्टव्यं idतथा विशेषताः च forसम्बन्धयितुं . वयं अस्माकं सर्वेषां राज्यानां कृते भ्रातृचयनकर्ता ( ) उपयुञ्ज्महे , यथा वा . यदा क्लास् इत्यनेन सह संयुक्तं भवति तदा वयं 's state इत्यस्य आधारेण प्रत्येकस्य आइटम् कृते पाठं सहजतया स्टाइल् कर्तुं शक्नुमः ।<input><label>~<input>:checked:disabled.form-check-label<input>

अस्माकं चेक्स् चेक् कृतानि अथवा अनिर्धारितस्थितिं सूचयितुं कस्टम् Bootstrap चिह्नानां उपयोगं कुर्वन्ति ।

चेक करता है

पूर्वनिर्धारित चेकबॉक्स

चेकबॉक्स चेक किया गया

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"अस्य भूमिकायाः समर्थनं कुर्वतां सहायकप्रौद्योगिकीनां कृते नियन्त्रणस्य स्वरूपं अधिकसटीकरूपेण प्रसारयितुं उपयोगं विचारयन्तु । प्राचीनसहायकप्रौद्योगिकीषु केवलं नियमितरूपेण चेकबॉक्सरूपेण fallback इति घोषितं भविष्यति । स्विच् अपि 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.

१

२

३ (अक्षम) .

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>

विपरीत

.form-check-reversemodifier class इत्यनेन सह विपरीतपक्षे स्वस्य चेकबॉक्स्, रेडियो, स्विच् च स्थापयन्तु ।

चेकबॉक्स को उल्टा करें

रिवर्स चेकबॉक्स अक्षम

रिवर्स स्विच चेकबॉक्स इनपुट

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>

Visually, these checkbox toggle buttons are identical to the button plugin toggle buttons. However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.

Radio toggle buttons

Checked Radio Disabled Radio

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>

Outlined styles

Different variants of .btn, such at the various outlined styles, are supported.

Single toggle
Checked
Checked success radio खतरा रेडियो

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;