Enable ripple for Switch label in JavaScript Switch control

31 Mar 2023 / 1 minute 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.

Source

Preview

app.ts

index.html

styles.css

import { Switch, rippleMouseHandler } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize Switch component.
let switchObj: Switch = new Switch({ checked: true });

// Render initialized Switch.
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: MouseEvent): void  {
    let rippleSpan: Element = this.parentElement.nextElementSibling.querySelector('.e-ripple-container');
    if (rippleSpan) {
        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="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <table class='size'>
            <tr>
                <td class='lSize'><label for='switch1'>USB Tethering</label></td>
                <td>
                    <input type="checkbox" id="switch1" />
                </td>
            </tr>
        </table>
    </div>
</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;
}