Documentation v8.1.1

Preview Downloads Purchase

Overview

Metronic 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

Default checkbox

Checked checkbox

Use .form-check-customand .form-check-solidclass with .form-checkto set custom layout with solid background style for a form check:

Default state

Without id linking

Checked state

Disabled checkbox

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

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

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:

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

Option 1

Option 2

Option 3

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

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

Default radio

Checked radio

Use .form-check-customand .form-check-solidclass with .form-checkto 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">
    <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:

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

Option 1

Option 2

Option 3

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

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

Default switch checkbox input

Checked switch checkbox input

Use .form-check-customand .form-check-solidclass with .form-switchto 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 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>