### Checks

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

Form's check on Bootstrap

##### Checks

Default checkbox
Checked checkbox

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

Indeterminate checkbox

    <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

Default radio
Default checked radio

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

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

    <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`.

Item 1
Item 2
Item 3 (disabled)

    <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

Item 1
item 2
Item 3 (disabled)

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

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

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