Checks

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

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

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

<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

<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 Phoenix|
2024 ©Themewagon

v1.19.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize