Switch documentation for Javascript

General

Getting Started Quick Install Using with Cordova Using with Vue.js Mobiscroll CLI ES6 Modules Instance Utility functions Upgrade Guide v3

Date & Time pickers

Calendar

Usage Options Events Methods Localization Conversion functions

Date & Time

Usage Options Events Methods Localization

Range

Usage Options Events Methods Localization

Timespan

Usage Options Events Methods Localization Conversion functions

Event Calendar

Usage Options Events Methods Localization

Form components

Alerts & Notifications

Alert Confirm Prompt Toast Snackbar

Buttons

Usage Options

Checkbox

Usage Attributes

Dropdown Forms

Usage Options Events Methods Localization Validation Groups

Progress

Usage Attributes Methods

Radio Buttons

Usage Attributes

Segmented

Usage Options

Slider

Usage Attributes Methods

Stepper

Usage Attributes

Switch

Usage Options

Textfields

Usage Attributes

Timer

Usage Options Events Methods Localization

Responsive list

Listview

Usage Options Events Methods Data attributes Localization

Numeric pickers

Measurement

Usage Options Events Methods Temperature Speed Distance Mass Force Localization

Number

Usage Options Events Methods Localization

Numpad

Usage Options Events Methods Localization Decimal Timespan Time Date Conversion functions

Pickers & dropdowns

Color

Usage Options Events Methods Localization

Image

Usage Options Events Methods Data attributes Localization

Rating

Usage Options Events Methods Localization

Scroller

Usage Options Events Methods Localization Conversion functions

Select

Usage Options Events Methods Localization

Treelist

Usage Options Events Methods Localization

Layout & navigation Tools

Icons Language Modules

Accessibility

Section 508 WAI-ARIA Support Keyboard Support RTL Support

Switch

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

Wrapped in label element

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

Wrapped in div element

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

With description

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

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

Options

Name	Description
checked	If an input element has the `checked` attribute, the element will be pre-selected (checked) when the page loads.
data-enhance	If a form element has the `data-enhance="false"` attribute, the particular element won't be enhanced.
data-role	If a checkbox input has the `data-role="switch"` attribute, it will be transformed into a switch.
disabled	If an element has the `disabled` attribute, the element will be disabled.

Methods

Name	Description
getVal()	Returns the state of the switch (true/false). Returns: Boolean The state of the switch value. Example Methods can be called on an instance. For more details see calling methods `mobiscrollInstance.getVal();`
setVal(value)	Sets the state of the switch (true/false). Parameters `value`: Boolean - The state of the switch value. Example Methods can be called on an instance. For more details see calling methods `mobiscrollInstance.setVal(false);`

Switch

Options

Methods

Returns: Boolean

Example

Parameters

Example