Documentation v1.1.0

Preview Purchase

Overview

Good extends the Bootstrap Checks and Radios  through the SASS variables in src/sass/components/_variables.scssand adds additonal options for the form elements in src/sass/components/forms/.

Checkbox

Default checkbox examples
Use .form-check-customand .form-check-solidclass with .form-checkto set custom layout with solid background style for a form check:
<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 checkbox
    </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 checkbox
    </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 checkbox
    </label>
</div>
Use .form-check-{success, danger, warning}classes for checkbox and radio to change their checked states:
<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" for="">
        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" for="">
        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" for="">
        Warning
    </label>
</div>
Use .form-check-{sm, lg}fixed size classes for checkbox and radio to change their sizes:
<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:
<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">
        40px
    </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 clipped checkbox and radio with a clipped check indicator on image or any other rich content:
<!--begin::Row-->
<div class="row">
    <!--begin::Col-->
    <div class="col-4">
        <label class="form-check-clip">
            <input class="btn-check" type="checkbox" value="1" checked name="option"/>
            <div class="form-check-wrapper">
                <div class="form-check-indicator"></div>
                <img class="form-check-content" src="assets/media/stock/600x400/img-1.jpg"/>
            </div>    

            <div class="form-check-label">
                Option 1
            </div>
        </label>
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-4">        
        <label class="form-check-clip">
            <input class="btn-check" type="checkbox" value="2" name="option"/>
            <div class="form-check-wrapper">
                <div class="form-check-indicator"></div>
                <img class="form-check-content" src="assets/media/stock/600x400/img-2.jpg"/>
            </div>   
            
            <div class="form-check-label">
                Option 2
            </div>
        </label>
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-4">        
        <label class="form-check-clip">
            <input class="btn-check" type="checkbox" value="3" name="option"/>
            <div class="form-check-wrapper">
                <div class="form-check-indicator"></div>
                <img class="form-check-content" src="assets/media/stock/600x400/img-3.jpg"/>
            </div>    

            <div class="form-check-label">
                Option 3
            </div>
        </label>
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->
Use a checkbox and radio inputs with image through data-kt-buttonsparameters to automatically handle radio checked state for images as well:
<!--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="assets/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="assets/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="assets/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
Use .form-check-customand .form-check-solidclass with .form-checkto set custom layout with solid background style for a form check:
<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:
<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:
<div class="form-check form-check-custom form-check-solid">
    <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">
    <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:
<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">
        40px
    </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">
        40px
    </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 clipped checkbox and radio with a clipped check indicator on image or any other rich content:
<!--begin::Row-->
<div class="row">
    <!--begin::Col-->
    <div class="col-4">
        <label class="form-check-clip text-center">
            <input class="btn-check" type="radio" value="1" checked name="option"/>
            <div class="form-check-wrapper">
                <div class="form-check-indicator"></div>
                <img class="form-check-content" src="assets/media/stock/600x400/img-1.jpg"/>
            </div>    

            <div class="form-check-label">
                Option 1
            </div>
        </label>
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-4">        
        <label class="form-check-clip text-center">
            <input class="btn-check" type="radio" value="2" name="option"/>
            <div class="form-check-wrapper">
                <div class="form-check-indicator"></div>
                <img class="form-check-content" src="assets/media/stock/600x400/img-2.jpg"/>
            </div>   
            
            <div class="form-check-label">
                Option 2
            </div>
        </label>
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-4">        
        <label class="form-check-clip text-center">
            <input class="btn-check" type="radio" value="3" name="option"/>
            <div class="form-check-wrapper">
                <div class="form-check-indicator"></div>
                <img class="form-check-content" src="assets/media/stock/600x400/img-3.jpg"/>
            </div>    

            <div class="form-check-label">
                Option 3
            </div>
        </label>
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->
Use a checkbox and radio inputs with image through data-kt-buttonsparameters to automatically handle radio checked state for images as well:
<!--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="assets/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="assets/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="assets/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
Use .form-check-customand .form-check-solidclass with .form-switchto set custom layout with solid background style for a form 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 Custom Size Classes  for switches to set custom sizes:
<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>
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now