Checkbox
Create a customizable checkbox with support for highly used options.
About
In Metro UI, 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">
Options
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 |
Events
Event | Data-* | Context |
---|---|---|
onCheckboxCreate(el) |
data-on-checkbox-create |
checkbox |
Methods
You can use methods to interact with input component:
indeterminate()
,
disable()
,
enable()
,
toggleState()
.
var checkbox = $(el).data('checkbox');
checkbox.toggleState();
Customize
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. |
<style>
.myCheck::before{
border-color: #0b98da!important;
}
</style>
<input type="checkbox" checked
data-role="checkbox"
data-style="2"
data-caption="Checkbox"
data-cls-caption="fg-cyan text-bold"
data-cls-check="bd-cyan myCheck">