ons-switch

Switch component. The switch can be toggled both by dragging and tapping. Will automatically displays a Material Design switch on Android devices.

Tutorial

See also

Attributes

Name Type Default Value Description
modifier String The appearance of the switch. Optional.
disabled Whether the switch is be disabled. Optional.
checked Whether the switch is checked. Optional.
input-id String Specify the id attribute of the inner <input> element. This is useful when using <label for="..."> elements. Optional.
var String Variable name to refer this switch. Optional. Works only during initialization.

Properties

Name Description
checked This value is true if the switch is checked.
value The current value of the input.
disabled Whether the element is disabled or not.
checkbox The underlying checkbox element.

Preset Modifiers

Name Description
material Material Design switch

Methods Summary

Signature Description
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that’s only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Events Summary

Name Description
change Fired when the switch is toggled.

Methods

on(eventName, listener)

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

once(eventName, listener)

Add an event listener that’s only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

off(eventName, [listener])

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

Events

change

Fired when the switch is toggled.

Parameters
Name Type Description
event Object Event object.
event.switch Object Switch object.
event.value Boolean Current value.
event.isInteractive Boolean True if the change was triggered by the user clicking on the switch.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.