Product Delivery
Targeted Sales
Collicitudin vel metus scelerisque ante commodo.
In Progress25% Completed
Turn checkboxes and radio buttons in switches
Bootstrap switch and switchery are best switches with many options.
Add .switch
class to checkbox to set as switch
Add checked
to set checked bootstrap switch
Add data-switch-always
to switch on every click
Checked & Disabled toggle
Add data-group-cls="btn-group-sm"
attribute for small switch
Add data-group-cls="btn-group-lg"
attribute for large switch
Add data-group-cls="btn-group-vertical"
attribute for vertical switch
Add data-off-title="VALUE"
attribute for OFF hover title and data-on-title="VALUE"
attribute for ON hover title
Add data-icon-cls="fa"
to set font family you are using data-off-icon-cls="fa FONT_AWESOME_ICON"
attribute for off switch icon & data-on-icon-cls="fa FONT_AWESOME_ICON"
attribute for on switch icon
To set only icon switch set data-off-label="false"
& data-off-label="false"
.
Add data-off-label="OffValue"
attribute for off switch label & data-on-label="OnValue"
attribute for on switch label
Add .switchBootstrap
class to set bootstrap switch
Add checked
to set checked bootstrap switch
Add checked disabled
to set checked & disabled bootstrap switch
Add checked readonly
for checked & readonly switch direction.
Add data-on-text="TEXT"
to change text of the left side of the switch
Add data-off-text="TEXT"
to change text of the right side of the switch
use data-label-text="TEXT"
for text of the center handle of the switch and that will work with data-indeterminate="true"
attribute only.
To set Large Switchery toggle, add data-size="lg"
to checkbox with .switchery
class.
To set Default Switchery toggle, add .switchery
class to checkbox.
To set Small Switchery toggle, add data-size="sm"
to checkbox with .switchery
class.
To set Extra Small Switchery toggle, add data-size="xs"
to checkbox with .switchery
class.