Customize the appearance of a Switch in React Toggle Switch Button component

27 Jul 2021 / 2 minutes to read

You can customize the appearance of the Switch component using the CSS rules. Define your own CSS rules according to your requirement and assign the class name to the cssClass property.

Customize Switch bar and handle

Switch bar and handle can be customized as per requirement using CSS rules. Switch bar and handle customized using cssClass property. In the following sample, the border-radius CSS property for the Switch bar (e-switch-inner) and handle (e-switch-handle) elements was changed border radius circle to square shape.

Source

Preview

app.tsx

index.html

index.css

app.jsx

import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Switch.
class App extends React.Component<{}, {}> {
  public render() {
    return (
            <div className="switch-control">
                <div>
                    <h3>Customizing Shape</h3>
                </div>
                <div>
                    <label htmlFor="switch1" style={{ padding: "10px 85px 10px 7px" }}> Square Switch </label>
                    <SwitchComponent id="switch1" cssClass="square" />
                </div>
                <div>
                    <label htmlFor='switch2' style= {{ padding: "10px 76px 10px 7px" }}> Bar and handle </label>
                    <SwitchComponent id="switch2" cssClass="custom-switch" checked={true} />
                </div>
                <div>
                    <label htmlFor='switch3' style= {{ padding: "10px 96px 10px 7px" }}> Handle text </label>
                    <SwitchComponent id="switch3" cssClass="handle-text" />
                </div>
            </div>
    );
  }
}
ReactDom.render(<App />, document.getElementById('switch'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Switch</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="index.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='switch'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

#container {
  visibility: hidden;
  margin-left: 10px;
}

.switch-control div {
  display: flex;
  align-items: center;
}

.switch-control h3 {
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  text-indent: 23px;
}

.switch-control {
  margin: 90px auto;
  width: 240px;
}

.switch-control label {
  -moz-user-select: none;
  cursor: pointer;
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
}

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

/* Square Switch */

.e-switch-wrapper.square .e-switch-inner,
.e-switch-wrapper.square .e-switch-handle {
  border-radius: 0;
}

/* Customize Handle and Bar Switch */

.e-switch-wrapper.custom-switch {
  width: 50px;
  height: 24px;
}

.e-switch-wrapper.custom-switch .e-switch-handle {
  width: 20px;
  height: 16px;
}

.e-switch-wrapper.custom-switch .e-switch-inner,
.e-switch-wrapper.custom-switch .e-switch-handle {
  border-radius: 0;
}

.e-switch-wrapper.custom-switch .e-switch-handle.e-switch-active {
  left: 42px;
}

/* Customize Handle and Bar Switch */

.e-switch-wrapper.handle-text {
  width: 58px;
  height: 24px;
}

.e-switch-wrapper.handle-text .e-switch-handle {
  width: 26px;
  height: 20px;
  left: 2px;
  background-color: #fff;
}

.e-switch-wrapper.handle-text .e-switch-inner,
.e-switch-wrapper.handle-text .e-switch-handle {
  border-radius: 0;
}

.e-switch-wrapper.handle-text .e-switch-handle.e-switch-active {
  left: 46px;
}

.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active,
.e-switch-wrapper.handle-text:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: #4d841d;
  border-color: #4d841d;
}

.e-switch-wrapper.handle-text .e-switch-inner,
.e-switch-wrapper.handle-text .e-switch-off {
  background-color: #e3165b;
  border-color: #e3165b;
}

.e-switch-wrapper.handle-text .e-switch-inner:after,
.e-switch-wrapper.handle-text .e-switch-inner:before {
  font-size: 10px;
  position: absolute;
  line-height: 21px;
  font-family: "Helvetica", sans-serif;
  z-index: 1;
  height: 100%;
  transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.e-switch-wrapper.handle-text .e-switch-inner:before {
  content: "OFF";
  color: #e3165b;
  left: 3px;
}

.e-switch-wrapper.handle-text .e-switch-inner:after {
  content: "ON";
  right: 5px;
  color: #fff;
}

.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active:before {
  color: #fff;
}

.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active:after {
  color: #4d841d;
}

import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Switch.
class App extends React.Component {
    render() {
        return (<div className="switch-control">
                <div>
                    <h3>Customizing Shape</h3>
                </div>
                <div>
                    <label htmlFor="switch1" style={{ padding: "10px 85px 10px 7px" }}> Square Switch </label>
                    <SwitchComponent id="switch1" cssClass="square"/>
                </div>
                <div>
                    <label htmlFor='switch2' style={{ padding: "10px 76px 10px 7px" }}> Bar and handle </label>
                    <SwitchComponent id="switch2" cssClass="custom-switch" checked={true}/>
                </div>
                <div>
                    <label htmlFor='switch3' style={{ padding: "10px 96px 10px 7px" }}> Handle text </label>
                    <SwitchComponent id="switch3" cssClass="handle-text"/>
                </div>
            </div>);
    }
}
ReactDom.render(<App />, document.getElementById('switch'));

Color the Switch

Switch colors can be customized as per the requirement using CSS rules. Switch bar and handle colors customized using cssClass property. In the following sample, the Switch bar (e-switch-inner) element background and border colors were changed from default colors.