Switch

Switches are bascially also checkboxes, but with a different style. To make a switch, add the mbsc-switch attribute to a checkbox.

<label>
    I agree
    <input id="agree" type="checkbox" mbsc-switch/>
</label>

<div>
    <label for="agree">I agree</label>
    <input id="agree" type="checkbox" mbsc-switch/>
</div>

<label>
    I agree
    <span class="mbsc-desc">Sample description</span>
    <input id="agree" type="checkbox" mbsc-switch/>
</label>

<label class="mbsc-switch-primary">
    Primary 
    <input type="checkbox" mbsc-switch checked>
</label>
<label class="mbsc-switch-secondary">
    Secondary
    <input type="checkbox" mbsc-switch checked>
</label>
<label class="mbsc-switch-success">
    Success
    <input type="checkbox" mbsc-switch checked>
</label>
<label class="mbsc-switch-danger">
    Danger
    <input type="checkbox" mbsc-switch checked>
</label>
<label class="mbsc-switch-warning">
    Warning
    <input type="checkbox" mbsc-switch checked>
</label>
<label class="mbsc-switch-info">
    Info
    <input type="checkbox" mbsc-switch checked>
</label>

For many more examples - simple and complex use-cases - check out the switch demos for jquery.

Setting state programmatically

There are two ways to set the state of the switch programmatically:

1. Set the checked property of the checkbox and call the refresh method of the switch:

$('#switch').prop('checked', true).mobiscroll('refresh');

2. Call the setVal method of the switch:

$('#switch').mobiscroll('setVal', true);

Options

Methods

// With selector
$('#mobiscroll').mobiscroll('getVal');

// With instance
mobiscrollInstance.getVal();

// With selector
$('#mobiscroll').mobiscroll('setVal', false);

// With instance
mobiscrollInstance.setVal(false);

Switch theming

Global variables of the Switch

Below you will find a list of SASS variables that affect the Switch:

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

The following variables are specific to the iOS theme light variant:

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Windows theme

The following variables are specific to the Windows theme light variant:

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Material theme

The following variables are specific to the Material theme light variant:

Material Dark theme

The following variables are specific to the Material theme dark variant:

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.