Overview
Craft extends the
Bootstrap Checks and Radios
through the SASS variables in
src/sass/components/_variables.scss
and adds additonal options for the form elements in
src/sass/components/forms/
.
Checkbox
Default checkbox examples
copy <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>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="kt_check_indeterminate_1" checked />
<label class="form-check-label" for="kt_check_indeterminate_1">
Indeterminate state
</label>
</div>
// Set a checkbox to indeterminate state
document.querySelector('#kt_check_indeterminate_1').indeterminate = true;
Use .form-check-custom
and .form-check-solid
class with .form-check
to set custom layout with solid background style for a form check:
Use .form-check-{success, danger, warning}
classes for checkbox and radio to change their checked states:
copy <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:
copy <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>
copy <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:
copy <!--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-custom
and .form-check-solid
class with .form-check
to set custom layout with solid background style for a form check:
Use .form-check-{success, danger, warning}
classes for checkbox and radio to change their checked states:
copy <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:
copy <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>
copy <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:
copy <!--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-custom
and .form-check-solid
class with .form-switch
to set custom layout with solid background style for a form switch:
Use .form-check-{color}
to set a custom color for the checked state:
copy <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>
copy <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>