Switch

Bootstrap switch and switchery are best switches with many options.

Bootstrap Checkbox Toggle

Add .switchclass 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

Bootstrap Switch Toggle


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.

Switchery Toggle

Basic Switchery Toggle

To set Switchery toggle, add .switchery class to checkbox.

Right Switchery Toggle

To set Switchery toggle to right, wrap checkbox with .float-right class.

Switchery Sizes

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.

Switchery Labels on both sides

Template Color Switchery


Color Switchery

COLOR SWITCHERY WITH LABELS ON BOTH SIDES