പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്സ് നാവിഗേഷനിലേക്ക് പോകുക
in English

ചെക്കുകളും റേഡിയോകളും

ഞങ്ങളുടെ പൂർണ്ണമായും മാറ്റിയെഴുതിയ ചെക്ക് ഘടകം ഉപയോഗിച്ച് സ്ഥിരമായ ക്രോസ്-ബ്രൗസറും ക്രോസ്-ഡിവൈസ് ചെക്ക്ബോക്സുകളും റേഡിയോകളും സൃഷ്ടിക്കുക.

ഈ പേജിൽ

സമീപിക്കുക

ബ്രൗസർ ഡിഫോൾട്ട് ചെക്ക്ബോക്സുകളും റേഡിയോകളും ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു, .form-checkരണ്ട് ഇൻപുട്ട് തരങ്ങൾക്കുമുള്ള ക്ലാസുകളുടെ ഒരു ശ്രേണി, അവയുടെ HTML ഘടകങ്ങളുടെ ലേഔട്ടും പെരുമാറ്റവും മെച്ചപ്പെടുത്തുന്നു, അത് കൂടുതൽ ഇഷ്‌ടാനുസൃതമാക്കലും ക്രോസ് ബ്രൗസർ സ്ഥിരതയും നൽകുന്നു. ഒരു ലിസ്റ്റിൽ ഒന്നോ അതിലധികമോ ഓപ്‌ഷനുകൾ തിരഞ്ഞെടുക്കുന്നതിനാണ് ചെക്ക്‌ബോക്‌സുകൾ, അതേസമയം റേഡിയോകൾ പലതിൽ നിന്നും ഒരു ഓപ്‌ഷൻ തിരഞ്ഞെടുക്കുന്നതിനുള്ളതാണ്.

ഘടനാപരമായി, നമ്മുടെ <input>s ഉം s ഉം ഒരു അകത്തെ <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;