Authors:Yoshiroh Kamiyama
Developers:Yoshiroh Kamiyama

Switch is a toggle switch with a sliding knob. You can either tap or slide the knob to toggle the switch. The onStateChanged handler is called when the switch is manipulated.


Constructor Parameters

Parameter Type Default Description
value String “on” The initial state of the switch. “on” or “off”. The default value is “on”.
name String “” A name for a hidden input field, which holds the current value.
leftLabel String “ON” The left-side label of the switch.
rightLabel String “OFF” The right-side label of the switch.
shape String “mblSwDefaultShape” The shape of the switch. “mblSwDefaultShape”, “mblSwSquareShape”, “mblSwRoundShape1”, “mblSwRoundShape2”, “mblSwArcShape1” or “mblSwArcShape2”.


Declarative example 1

<div id="sw" data-dojo-type="" value="off"></div>

Declarative example 2

<div data-dojo-type="" value="on" leftLabel="Start" rightLabel="Stop"></div>

Square Shape

<div class="mblSwSquareShape" data-dojo-type=""></div>

Round Shape 1

<div class="mblSwRoundShape1" data-dojo-type=""></div>

Round Shape 2

<div class="mblSwRoundShape2" data-dojo-type=""></div>

Arc Shape 1

<div class="mblSwArcShape1" data-dojo-type=""></div>

Arc Shape 2

<div class="mblSwArcShape2" data-dojo-type=""></div>

Custom Color

.color1 .mblSwitchBgLeft {
  background: -webkit-gradient(linear, left top, left bottom,
                               from(#28B159), to(#75FBAC),
                               color-stop(0.5, #3FEB84),
                               color-stop(0.5, #4CEE8E));
.color1 .mblSwitchBgRight {
  background: -webkit-gradient(linear, left top, left bottom,
                               from(#CECECE), to(#FDFDFD),
                               color-stop(0.5, #EEEEEE),
                               color-stop(0.5, #F8F8F8));
.color1 .mblSwitchKnob {
  background: -webkit-gradient(linear, left top, left bottom,
                               from(#999999), to(#FAFAFA),
                               color-stop(0.5, #BBBBBB),
                               color-stop(0.5, #CACACA));
<div class="mblSwRoundShape1 color1" data-dojo-type=""></div>

Listening to onStateChanged

To listen to the changes of switch states, you can connect to the onStateChanged handler, which is called every time the state has been changed. Or you may want to create a subclass of Switch and override the onStateChanged handler.

dojo.connect(dijit.byId("sw"), "onStateChanged", function(newState){
    alert("newState = "+newState); // newState is "on" or "off"

A setter for “value”

To change the state of the switch programmatically, you can use a setter method for “value” as below.

var widget = dijit.byId("sw");
widget.set("value", "on"); // "on" or "off" can be set
Error in the documentation? Can’t find what you are looking for? Let us know!