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

चेक आणि रेडिओ

आमच्या पूर्णपणे पुनर्लिखित चेक घटकासह सुसंगत क्रॉस-ब्राउझर आणि क्रॉस-डिव्हाइस चेकबॉक्सेस आणि रेडिओ तयार करा.

या पृष्ठावर

दृष्टीकोन

ब्राउझर डीफॉल्ट चेकबॉक्सेस आणि रेडिओ याच्या मदतीने बदलले जातात .form-check, दोन्ही इनपुट प्रकारांसाठी वर्गांची मालिका जी त्यांच्या HTML घटकांचे लेआउट आणि वर्तन सुधारते, जे अधिक सानुकूलन आणि क्रॉस ब्राउझर सुसंगतता प्रदान करते. चेकबॉक्स हे सूचीतील एक किंवा अनेक पर्याय निवडण्यासाठी असतात, तर रेडिओ अनेक पर्यायांमधून एक पर्याय निवडण्यासाठी असतात.

संरचनात्मकदृष्ट्या, आपले <input>s आणि s हे a <label>च्या विरूद्ध भावंड घटक आहेत . हे थोडे अधिक शब्दशः आहे कारण तुम्ही निर्दिष्ट करणे आवश्यक आहे आणि आणि आणि . आम्ही आमच्या सर्व राज्यांसाठी सिबलिंग सिलेक्टर ( ) वापरतो, जसे किंवा . वर्गासह एकत्रित केल्यावर , आम्ही प्रत्येक आयटमसाठीच्या स्थितीवर आधारित मजकूर सहजपणे शैलीबद्ध करू शकतो.<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>

अनिश्चित

JavaScript द्वारे मॅन्युअली सेट केल्यावर चेकबॉक्स स्यूडो क्लास वापरू :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;