Monaca Onsen UI Discord Chat Github Repo


  • Onsen UI

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

    Click here to see the original article

  • This component is broken. You can click the ons-switch, but the value is not being output and the checkbox state is not changed. You should really, really consider writing tests to flag this kind of error before release.

  • @milkisevil Whats not working? Here is a complete working example. Also, I know they unit test but I can’t remember what framework they use off the top of my head.

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link href=',300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
        <title>Onsen UI Forum Help by Munsterlander</title>
        <link rel="stylesheet" href="" type="text/css" media="all" />
        <link rel="stylesheet" href="">
        <script src=""></script>
        <script src="components/loader.js"></script> 
            if (localStorage.getItem("switch") === null) {
                localStorage.setItem('switch', 'true'); 
                document.getElementById('switch').checked = (localStorage.getItem("switch")  === 'true');                    
                document.getElementById('switch').addEventListener('change', function(e) {
                    document.getElementById('output').innerHTML =;
        <ons-switch id="switch"></ons-switch>
        <div id="output"></div>

    Edit: Just saw this is in Angular 2. I have also observed the bug for Angular but no Vanilla.