ꯆꯦꯀꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯏꯕꯥ ꯆꯦꯀꯁꯤꯡꯒꯤ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯦꯞꯄꯥ ꯂꯩꯇꯅꯥ ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯑꯃꯁꯨꯡ ꯀ꯭ꯔꯣꯁ-ꯗꯤꯚꯥꯏꯁ ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣꯁꯤꯡ ꯁꯦꯝꯃꯨ꯫

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯊꯧꯑꯣꯡ

.form-checkꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣꯁꯤꯡ ꯑꯁꯤ , ꯃꯈꯣꯌꯒꯤ HTML ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯁꯨꯡ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯐꯒꯠꯍꯅꯕꯥ, ꯍꯦꯟꯅꯥ ꯀꯁ꯭ꯇꯃꯥꯏꯖꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯀ꯭ꯔꯣꯁ ꯕ꯭ꯔꯥꯎꯖꯔ ꯀꯟꯁꯤꯁ꯭ꯇꯦꯟꯁꯤ ꯄꯤꯕꯥ ꯏꯅꯄꯨꯠ ꯃꯈꯜ ꯑꯅꯤꯃꯛꯀꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯒꯤ ꯃꯇꯦꯡꯅꯥ ꯃꯍꯨꯠ ꯁꯤꯜꯂꯤ꯫ ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡ ꯑꯁꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯗꯥ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ ꯀꯌꯥ ꯈꯅꯕꯒꯤꯗꯃꯛꯇꯅꯤ, ꯑꯗꯨꯒꯥ ꯔꯦꯗꯤꯑꯣꯁꯤꯡ ꯑꯁꯤ ꯀꯌꯥ ꯑꯃꯗꯒꯤ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯈꯅꯕꯅꯤ꯫

ꯁ꯭ꯠꯔꯀꯆꯔꯦꯜ ꯑꯣꯏꯅꯥ , ꯑꯩꯈꯣꯌꯒꯤ <input>ꯑꯦꯁ ꯑꯃꯁꯨꯡ <label>ꯑꯦꯁ ꯑꯁꯤ . ꯃꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯕꯥ ꯃꯔꯃꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯑꯃꯁꯨꯡ . ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯔꯥꯖ꯭ꯌ ꯄꯨꯝꯅꯃꯛꯀꯤꯗꯃꯛ ꯁꯤꯕꯂꯤꯡ ꯁꯦꯂꯦꯛꯇꯔ ( ) ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯩ , ꯃꯗꯨꯗꯤ ꯅꯠꯔꯒꯥ . ꯀ꯭ꯂꯥꯁꯀꯥ ꯄꯨꯅꯁꯤꯜꯂꯀꯄꯥ ꯃꯇꯃꯗꯥ , ꯑꯩꯈꯣꯌꯅꯥ ꯑꯥꯏꯇꯦꯝ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯇꯦꯛꯁ ꯑꯗꯨ 's ꯁ꯭ꯇꯦꯠ ꯑꯗꯨꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯐꯖꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫<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>

ꯂꯦꯞꯄꯥ ꯂꯩꯇꯕꯥ꯫

ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯄ꯭ꯁꯨꯗꯣ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ :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"ꯊꯧꯗꯥꯡ ꯑꯁꯤꯕꯨ ꯃꯇꯦꯡ ꯄꯥꯡꯂꯤꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯀꯟꯠꯔꯣꯂꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ ꯑꯗꯨ ꯍꯦꯟꯅꯥ ꯑꯆꯨꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯌꯧꯍꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯈꯟꯅꯕꯤꯌꯨ꯫ ꯑꯔꯤꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ, ꯃꯁꯤ ꯁꯨꯞꯅꯇꯒꯤ ꯐꯣꯜꯕꯦꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯆꯥꯡ ꯅꯥꯏꯅꯥ ꯆꯦꯀꯕꯣꯛꯁ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯥꯎꯊꯣꯛꯀꯅꯤ꯫ 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;