Enable ripple for switch label in EJ2 JavaScript Switch control

10 May 20234 minutes to read

By default, label with ripple effect is not available in Switch. You can achieve this using rippleMouseHandler
method.

The following example illustrates how to enable ripple effect for labels in Switch component.

ej.base.enableRipple(true)

var switchObj = new ej.buttons.Switch({ checked: true });
switchObj.appendTo('#switch1');

// Function to handle ripple effect for Switch with label.
document.querySelector('.lSize label').addEventListener('mouseup', rippleHandler);
document.querySelector('.lSize label').addEventListener('mousedown', rippleHandler);

function rippleHandler(e) {
    var rippleSpan = this.parentElement.nextElementSibling.querySelector('.e-ripple-container');
    if (rippleSpan) {
        ejs.buttons.rippleMouseHandler(e, rippleSpan);
    }
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Switch</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <table class="size">
            <tbody><tr>
                <td class="lSize"><label for="switch1">USB Tethering</label></td>
                <td>
                    <input type="checkbox" id="switch1">
                </td>
            </tr>
        </tbody></table>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
    margin-left: 10px;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

.e-switch-wrapper {
  margin-top: 18px;
}

.size tr td {
  padding: 10px;
}

.size .lSize {
  padding-top: 24px;  
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
}

.size .lSize label{
  cursor: pointer;
  user-select: none;
}