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

Default checkbox
Checked checkbox

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

Default radio
Default checked radio

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

Default switch checkbox input
Checked switch checkbox input
Disabled switch checkbox input
Disabled checked switch checkbox input

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

Item 1
Item 2
Item 3 (disabled)

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

Item 1
item 2
Item 3 (disabled)

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize