Documentation v3.0.16

Overview

This is an additional option that extends the Bootstrap Checks and Radios.

Checkbox

Default checkbox examples.

Default state

Checked state

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

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked />
  <label class="form-check-label" for="flexCheckChecked">Checked state</label>
</div>

Use .form-check-custom and .form-check-solid class with .form-check to set custom layout with solid background style for a form check:

Default

Without id linking

Checked state

Disabled state

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

<label class="form-check form-check-custom form-check-solid">
  <input class="form-check-input" type="checkbox" value="1"/>
  <span class="form-check-label">Without id linking</span>
</label>

<div class="form-check form-check-custom form-check-solid">
  <input class="form-check-input" type="checkbox" value="1" id="flexCheckChecked" checked="checked" />
  <label class="form-check-label" for="flexCheckChecked">Checked state</label>
</div>

<div class="form-check form-check-custom form-check-solid">
  <input class="form-check-input" type="checkbox" value="1" disabled id="flexCheckDisabled" />
  <label class="form-check-label" for="flexCheckDisabled">Disabled state</label>
</div>

Use .form-check-{success, danger, warning} classes for checkbox and radio to change their checked states.

Success

Danger

Warning

          <div class="form-check form-check-custom form-check-success form-check-solid">
  <input class="form-check-input" type="checkbox" value="" checked />
  <label class="form-check-label">Success</label>
</div>

<div class="form-check form-check-custom form-check-danger form-check-solid">
  <input class="form-check-input" type="checkbox" value="" checked />
  <label class="form-check-label">Danger</label>
</div>

<div class="form-check form-check-custom form-check-warning form-check-solid">
  <input class="form-check-input" type="checkbox" value="" checked />
  <label class="form-check-label">Warning</label>
</div>

Use .form-check-{sm, lg} fixed size classes for checkbox and radio to change their sizes.

Large checkbox

Default radio

Small checkbox

          <div class="form-check form-check-custom form-check-solid form-check-lg">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckboxLg"/>
  <label class="form-check-label" for="flexCheckboxLg">Large checkbox</label>
</div>
<div class="form-check form-check-custom form-check-solid form-check-lg">
  <input class="form-check-input" type="radio" value="" id="flexCheckboxSm"  />
  <label class="form-check-label" for="flexCheckboxSm">Large radio</label>
</div>
<div class="form-check form-check-custom form-check-solid form-check-sm">
  <input class="form-check-input" type="checkbox" value="" id="flexRadioLg"/>
  <label class="form-check-label" for="flexRadioLg">Small checkbox</label>
</div>

Use Custom Size Classes for checkbox and radio to set custom sizes.

30px

40px

50px

          <div class="form-check form-check-custom form-check-solid me-10">
  <input class="form-check-input h-30px w-30px" type="checkbox" value="" id="flexCheckbox30"/>
  <label class="form-check-label" for="flexCheckbox30">30px</label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
  <input class="form-check-input h-40px w-40px" type="checkbox" value="" id="flexCheckbox40"/>
  <label class="form-check-label" for="flexCheckbox40">40px</label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
  <input class="form-check-input h-50px w-50px" type="checkbox" value="" id="flexCheckbox50"/>
  <label class="form-check-label" for="flexCheckbox50">50px</label>
</div>

Use a checkbox and radio inputs with image through data-kt-buttons parameters to automatically handle radio checked state for images as well.

Option 1

Option 2

Option 3

          <!--begin::Row-->
<div class="row mw-500px mb-5" data-kt-buttons="true" data-kt-buttons-target=".form-check-image, .form-check-input">>
  <!--begin::Col-->
  <div class="col-4">
    <label class="form-check-image active">
      <div class="form-check-wrapper">
        <img src="build/theme/media/stock/600x400/img-1.jpg"/>
      </div>
      <div class="form-check form-check-custom form-check-solid">
        <input class="form-check-input" type="checkbox" checked value="1" name="option2"/>
        <div class="form-check-label">Option 1</div>
      </div>
    </label>
  </div>
  <!--end::Col-->
  <!--begin::Col-->
  <div class="col-4">
    <label class="form-check-image">
      <div class="form-check-wrapper">
        <img src="build/theme/media/stock/600x400/img-2.jpg"/>
      </div>
      <div class="form-check form-check-custom form-check-solid me-10">
        <input class="form-check-input" type="checkbox" value="1" name="option2" id="text_wow"/>
        <div class="form-check-label">Option 2</div>
      </div>
    </label>
  </div>
  <!--end::Col-->
  <!--begin::Col-->
  <div class="col-4">
    <label class="form-check-image">
      <div class="form-check-wrapper">
        <img src="build/theme/media/stock/600x400/img-3.jpg"/>
      </div>
      <div class="form-check form-check-custom form-check-solid me-10">
        <input class="form-check-input" type="checkbox" value="1" name="option2"/>
        <div class="form-check-label">Option 3</div>
      </div>
    </label>
  </div>
  <!--end::Col-->
</div>
<!--end::Row-->

Radio

Default radio examples.

Default radio

Checked radio

Use .form-check-custom and .form-check-solid class with .form-check to set custom layout with solid background style for a form check.

Default radio

Without id linking

Checked radio

Disabled radio

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

<label class="form-check form-check-custom form-check-solid">
  <input class="form-check-input" type="radio" value=""/>
  <span class="form-check-label">Without id linking</span>
</label>

<div class="form-check form-check-custom form-check-solid">
  <input class="form-check-input" type="radio" value="" id="flexRadioChecked" checked="checked" />
  <label class="form-check-label" for="flexRadioChecked">Checked radio</label>
</div>

<div class="form-check form-check-custom form-check-solid">
  <input class="form-check-input" type="radio" value="" disabled id="flexRadioDisabled"/>
  <label class="form-check-label" for="flexRadioDisabled">Disabled radio</label>
</div>

Use .form-check-{success, danger, warning} classes for checkbox and radio to change their checked states.

Success

Danger

Warning

          <div class="form-check form-check-custom form-check-success form-check-solid">
  <input class="form-check-input" type="radio" value="" checked id="flexCheckboxLg"/>
  <label class="form-check-label" for="flexCheckboxLg">Success</label>
</div>

<div class="form-check form-check-custom form-check-danger form-check-solid">
  <input class="form-check-input" type="radio" value="" checked id="flexCheckboxSm"  />
  <label class="form-check-label" for="flexCheckboxSm">Danger</label>
</div>

<div class="form-check form-check-custom form-check-warning form-check-solid">
  <input class="form-check-input" type="radio" value="" checked id="flexRadioLg"/>
  <label class="form-check-label" for="flexRadioLg">Warning</label>
</div>

Use .form-check-{sm, lg} fixed size classes for checkbox and radio to change their sizes.

Large radio

Small radio

          <div class="form-check form-check-custom form-check-solid form-check-lg">
  <input class="form-check-input" type="radio" value="" id="flexCheckboxLg"/>
  <label class="form-check-label" for="flexCheckboxLg">Large checkbox</label>
</div>

<div class="form-check form-check-custom form-check-solid">
  <input class="form-check-input" type="radio" value="" id="flexCheckboxSm"  />
  <label class="form-check-label" for="flexCheckboxSm">Large radio</label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm">
  <input class="form-check-input" type="radio" value="" id="flexRadioLg"/>
  <label class="form-check-label" for="flexRadioLg">Small checkbox</label>
</div>

Use Custom Size Classes for checkbox and radio to set custom sizes.

30px

40px

50px

          <div class="form-check form-check-custom form-check-solid me-10">
  <input class="form-check-input h-30px w-30px" type="checkbox" value="" id="flexCheckbox30"/>
  <label class="form-check-label" for="flexCheckbox30">30px</label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
  <input class="form-check-input h-40px w-40px" type="checkbox" value="" id="flexCheckbox40"/>
  <label class="form-check-label" for="flexCheckbox40">40px</label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
  <input class="form-check-input h-50px w-50px" type="checkbox" value="" id="flexCheckbox50"/>
  <label class="form-check-label" for="flexCheckbox50">50px</label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
  <input class="form-check-input h-30px w-30px" type="radio" value="" id="flexRadio30"/>
  <label class="form-check-label" for="flexRadio30">30px</label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
  <input class="form-check-input h-40px w-40px" type="radio" value="" id="flexRadio40"/>
  <label class="form-check-label" for="flexRadio40">40px</label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
  <input class="form-check-input h-50px w-50px" type="radio" value="" id="flexRadio50"/>
  <label class="form-check-label" for="flexRadio50">50px</label>
</div>

Use a checkbox and radio inputs with image through data-kt-buttons parameters to automatically handle radio checked state for images as well.

Option 1

Option 2

Option 3

          <!--begin::Row-->
<div class="row mw-500px mb-5" data-kt-buttons="true" data-kt-buttons-target=".form-check-image, .form-check-input">>
  <!--begin::Col-->
  <div class="col-4">
    <label class="form-check-image active">
      <div class="form-check-wrapper">
        <img src="build/theme/media/stock/600x400/img-1.jpg"/>
      </div>
      <div class="form-check form-check-custom form-check-solid">
        <input class="form-check-input" type="radio" checked value="1" name="option2"/>
        <div class="form-check-label">Option 1</div>
      </div>
    </label>
  </div>
  <!--end::Col-->
  <!--begin::Col-->
  <div class="col-4">
    <label class="form-check-image">
      <div class="form-check-wrapper">
        <img src="build/theme/media/stock/600x400/img-2.jpg"/>
      </div>
      <div class="form-check form-check-custom form-check-solid me-10">
        <input class="form-check-input" type="radio" value="1" name="option2" id="text_wow"/>
        <div class="form-check-label">Option 2</div>
      </div>
    </label>
  </div>
  <!--end::Col-->
  <!--begin::Col-->
  <div class="col-4">
    <label class="form-check-image">
      <div class="form-check-wrapper">
        <img src="build/theme/media/stock/600x400/img-3.jpg"/>
      </div>
      <div class="form-check form-check-custom form-check-solid me-10">
        <input class="form-check-input" type="radio" value="1" name="option2"/>
        <div class="form-check-label">Option 3</div>
      </div>
    </label>
  </div>
  <!--end::Col-->
</div>
<!--end::Row-->

Switch

Default checkbox examples.

Default switch checkbox input

Checked switch checkbox input

Use .form-check-custom and .form-check-solid class with .form-switch to set custom layout with solid background style for a form switch.

Default switch

Without id linking

Checked switch

Disabled switch

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

<label class="form-check form-switch form-check-custom form-check-solid">
  <input class="form-check-input" type="checkbox" value=""/>
  <span class="form-check-label">Without id linking</span>
</label>

<div class="form-check form-switch form-check-custom form-check-solid">
  <input class="form-check-input" type="checkbox" value="" id="flexSwitchChecked" checked="checked" />
  <label class="form-check-label" for="flexSwitchChecked">Checked switch</label>
</div>

<div class="form-check form-switch form-check-custom form-check-solid">
  <input class="form-check-input" type="checkbox" value="" id="flexSwitchDisabled" disabled checked="checked" />
  <label class="form-check-label" for="flexSwitchDisabled">Disabled switch</label>
</div>

Use .form-check-{color} to set a custom color for the checked state.

Success color

Danger color

Warning color

          <div class="form-check form-switch form-check-custom form-check-success form-check-solid">
  <input class="form-check-input " type="checkbox" value="" checked id="kt_flexSwitchCustomDefault_1_1"/>
  <label class="form-check-label" for="kt_flexSwitchCustomDefault_1_1">Success color</label>
</div>

<div class="form-check form-switch form-check-custom form-check-danger form-check-solid">
  <input class="form-check-input " type="checkbox" value="" checked id="kt_flexSwitchCustomDefault_1_2"/>
  <label class="form-check-label" for="kt_flexSwitchCustomDefault_1_2">Danger color</label>
</div>

<div class="form-check form-switch form-check-custom form-check-warning form-check-solid">
  <input class="form-check-input " type="checkbox" value="" checked id="kt_flexSwitchCustomDefault_1_3"/>
  <label class="form-check-label" for="kt_flexSwitchCustomDefault_1_3">Warning color</label>
</div>

Use Custom Size Classes for switches to set custom sizes.

20px x 30px

30px X 50px

40px X 60px

          <div class="form-check form-switch form-check-custom form-check-solid me-10">
  <input class="form-check-input h-20px w-30px" type="checkbox" value="" id="flexSwitch20x30"/>
  <label class="form-check-label" for="flexSwitch20x30">20px x 30px</label>
</div>

<div class="form-check form-switch form-check-custom form-check-solid me-10">
  <input class="form-check-input h-30px w-50px" type="checkbox" value="" id="flexSwitch30x50"/>
  <label class="form-check-label" for="flexSwitch30x50">30px X 50px</label>
</div>

<div class="form-check form-switch form-check-custom form-check-solid me-10">
  <input class="form-check-input h-40px w-60px" type="checkbox" value="" id="flexSwitch40x60"/>
  <label class="form-check-label" for="flexSwitch40x60">40px X 60px</label>
</div>