Create a customizable checkbox with support for highly used options.


In Metro 4, you can create styled checkbox. To define it, add attribute data-role="checkbox" to HTML checkbox element.

                    <input type="checkbox" data-role="checkbox" >
                    <input type="checkbox" data-role="checkbox" checked>
                    <input type="checkbox" data-role="checkbox" disabled>
                    <input type="checkbox" data-role="checkbox" disabled checked>

Checkbox style

You can use two styles for checkbox. To define style, add attribute data-style="1|2".

                    <input type="checkbox" data-role="checkbox">
                    <input type="checkbox" data-role="checkbox" data-style="2">

Checkbox caption

You can set your one value for button with attribute data-caption="...". By default caption placed on the right o checkbox. To place on the left, use attribute data-caption-position="left"

                    <input type="checkbox" data-role="checkbox" data-caption="Checkbox">
                    <input type="checkbox" data-role="checkbox" data-caption="Checkbox" data-caption-position="left">

Indeterminate state

You can set checkbox to indeterminate state with attribute data-indeterminate="true".

                    <input type="checkbox" data-role="checkbox"
                        data-caption="Indeterminate" data-indeterminate="true">

                    <input type="checkbox" data-role="checkbox"
                        data-caption="Indeterminate" data-indeterminate="true" data-style="2">


Option Data-* Default Desc
style data-style 1 Checkbox style. Must be 1 or 2
caption data-caption Checkbox caption
captionPosition data-caption-position right Checkbox caption position: left or right (default)
indeterminate data-indeterminate false Set checkbox to indeterminate state


Event Data-* Context
onCheckboxCreate(el) data-on-checkbox-create checkbox


You can use methods to interact with input component: indeterminate(), disable(), enable(), toggleState().

                    var checkbox = $(el).data('checkbox');


You can customize your input with special attributes:

Option Data-* Desc
clsCheckbox data-cls-checkbox Additional classes for control.
clsCaption data-cls-caption Additional classes for caption control.
clsCheck data-cls-check Additional classes check.

                            border-color: #0b98da!important;

                    <input type="checkbox" checked
                           data-cls-caption="fg-cyan text-bold"
                           data-cls-check="bd-cyan myCheck">