Switch

Create a switch styled checkbox with support for highly used options.

About

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


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

Material design

You can enable material design for switch with attribute data-material="true".


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

Switch 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="switch" data-caption="Switch">
                    <input type="checkbox" data-role="switch" data-caption="Switch" data-caption-position="left">

Options

Option	Data-*	Default	Desc
`caption`	`data-caption`		Checkbox caption
`captionPosition`	`data-caption-position`	right	Checkbox caption position: left or right (default)

Events

Event	Data-*	Context
`onSwitchCreate(el)`	`data-on-switch-create`	checkbox

Methods

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


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

Customize

You can customize your input with special attributes:

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


                    <style>
                        .mySwitch .check::after {
                            background: #0a87c1!important;
                            border-color: #0a87c1!important;
                        }
                        .mySwitch input[type="checkbox"]:checked ~ .check {
                            background: #0a87c1!important;
                        }
                        .mySwitch input[type="checkbox"]:checked ~ .check::after {
                            border-color: #ffffff!important;
                            background: #ffffff!important;
                        }
                    </style>

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

Table of contents