મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
Check
in English

તપાસો અને રેડિયો

અમારા સંપૂર્ણપણે ફરીથી લખેલા ચેક્સ ઘટક સાથે સુસંગત ક્રોસ-બ્રાઉઝર અને ક્રોસ-ડિવાઈસ ચેકબોક્સ અને રેડિયો બનાવો.

આ પૃષ્ઠ પર

અભિગમ

બ્રાઉઝર ડિફૉલ્ટ ચેકબોક્સ અને રેડિયોને ની મદદ સાથે બદલવામાં આવે છે .form-check, બંને ઇનપુટ પ્રકારો માટે વર્ગોની શ્રેણી જે તેમના HTML ઘટકોના લેઆઉટ અને વર્તનને સુધારે છે, જે વધુ કસ્ટમાઇઝેશન અને ક્રોસ બ્રાઉઝર સુસંગતતા પ્રદાન કરે છે. ચેકબોક્સ સૂચિમાં એક અથવા અનેક વિકલ્પો પસંદ કરવા માટે છે, જ્યારે રેડિયો ઘણામાંથી એક વિકલ્પ પસંદ કરવા માટે છે.

માળખાકીય રીતે, આપણા <input>s અને s એ એક ની અંદરના <label>ભાઈ-બહેન તત્વો છે . આ થોડું વધારે વર્બોઝ છે કારણ કે તમારે અને ને સંબંધિત કરવા માટે એટ્રિબ્યુટ્સનો ઉલ્લેખ કરવો આવશ્યક છે . અમે અમારા તમામ રાજ્યો માટે સિબલ સિલેક્ટર ( ) નો ઉપયોગ કરીએ છીએ , જેમ કે અથવા . જ્યારે વર્ગ સાથે જોડવામાં આવે છે , ત્યારે અમે 'ની સ્થિતિના આધારે દરેક આઇટમ માટે ટેક્સ્ટને સરળતાથી સ્ટાઇલ કરી શકીએ છીએ .<input><label>idfor<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>

અનિશ્ચિત

જ્યારે JavaScript દ્વારા મેન્યુઅલી સેટ કરવામાં આવે ત્યારે ચેકબોક્સ :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>

અક્ષમ

disabledએટ્રિબ્યુટ ઉમેરો અને <label>ઇનપુટની સ્થિતિ સૂચવવામાં મદદ કરવા માટે સંબંધિત s આપોઆપ હળવા રંગ સાથે મેચ કરવા માટે સ્ટાઇલ કરવામાં આવે છે.

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

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