Checks

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

Form's check on Bootstrap
Checks
<div class="form-check">
  <input class="form-check-input" id="flexCheckDefault" type="checkbox" value="" />
  <label class="form-check-label" for="flexCheckDefault">Default checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="flexCheckChecked" type="checkbox" value="" checked="" />
  <label class="form-check-label" for="flexCheckChecked">Checked checkbox</label>
</div>
Indeterminate

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

<div class="form-check">
  <input class="form-check-input" id="flexCheckIndeterminate" type="checkbox" value="" />
  <label class="form-check-label" for="flexCheckIndeterminate">Indeterminate checkbox</label>
</div>
Radios
<div class="form-check">
  <input class="form-check-input" id="flexRadioDefault1" type="radio" name="flexRadioDefault" />
  <label class="form-check-label" for="flexRadioDefault1">Default radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="flexRadioDefault2" type="radio" name="flexRadioDefault" checked="" />
  <label class="form-check-label" for="flexRadioDefault2">Default checked radio</label>
</div>
Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.

<div class="form-check form-switch">
  <input class="form-check-input" id="flexSwitchCheckDefault" type="checkbox" />
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" id="flexSwitchCheckChecked" type="checkbox" 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" id="flexSwitchCheckDisabled" type="checkbox" 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" id="flexSwitchCheckCheckedDisabled" type="checkbox" checked="" disabled="" />
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
Check Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineCheckbox1" type="checkbox" value="option1" />
  <label class="form-check-label" for="inlineCheckbox1">Item 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineCheckbox2" type="checkbox" value="option2" />
  <label class="form-check-label" for="inlineCheckbox2">Item 2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineCheckbox3" type="checkbox" value="option3" disabled="" />
  <label class="form-check-label" for="inlineCheckbox3">Item 3 (disabled)</label>
</div>
Radio Inline
<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineRadio1" type="radio" name="inlineRadioOptions" value="option1" />
  <label class="form-check-label" for="inlineRadio1">Item 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineRadio2" type="radio" name="inlineRadioOptions" value="option2" />
  <label class="form-check-label" for="inlineRadio2">item 2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineRadio3" type="radio" name="inlineRadioOptions" value="option3" disabled="" />
  <label class="form-check-label" for="inlineRadio3">Item 3 (disabled)</label>
</div>

Thank you for creating with Falcon |
2023 © Themewagon

v3.16.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.


RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application


Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize