Checks and radios

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

Checkboxes
Radios
Switches
Use checked attribute to input for checked mode, same as disabled for disabled mode. and use .form-switch to .form-check to enable switch mode.
Note: you must add type="checkbox" on input when you want to enable switch mode.
checkbox

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default
  </label>
</div>
radio

<div class="form-check">
  <input class="form-check-input" type="radio" value=""  name="flexRadioDefault" id="flexRadioDefault">
  <label class="form-check-label" for="flexRadioDefault">
    Default
  </label>
</div>
switch

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" value="" id="flexSwitchDefault">
  <label class="form-check-label" for="flexSwitchDefault">
    Default
  </label>
</div>

Sizing

Set heights using classes like .form-check-xl, .form-check-lg and .form-check-sm.

Checkboxes
Radios
Switches
HTML

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckSize">
  <label class="form-check-label" for="flexCheckSize">
    Checkbox Label
  </label>
</div>

Indeterminate

Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

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>

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .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>

Reverse

Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier 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>
© 2022 Nioboard. Template by Softnio
Recent Notification