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.
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.
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Switch.
function App() {
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>);
}
export default App;
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/20.4.48/ej2-base/styles/fabric.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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.
function App() {
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>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('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.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
// To render Switch.
function App() {
return (<div className="switch-control">
<div>
<h3>Customizing Color</h3>
</div>
<div>
<label htmlFor="switch1" style={{ padding: "10px 85px 10px 0" }}> Custom color </label>
<SwitchComponent id="switch1" cssClass='bar-color'/>
</div>
<div>
<label htmlFor='switch2' style={{ padding: "10px 90px 10px 0" }}> Handle color </label>
<SwitchComponent id="switch2" cssClass='handle-color' checked={true}/>
</div>
<div>
<label htmlFor='switch3' style={{ padding: "10px 103px 10px 0" }}> iOS Switch </label>
<SwitchComponent id="switch3" cssClass='custom-iOS' checked={true}/>
</div>
</div>);
}
export default App;
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/20.4.48/ej2-base/styles/fabric.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap.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;
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%;
}
/* Custom color Switch */
.e-switch-wrapper.bar-color .e-switch-inner.e-switch-active,
.e-switch-wrapper.bar-color:hover .e-switch-inner.e-switch-active .e-switch-on {
background-color: #4d841d;
border-color: #4d841d;
}
.e-switch-wrapper.bar-color .e-switch-inner,
.e-switch-wrapper.bar-color .e-switch-off {
background-color: #e3165b;
border-color: #e3165b;
}
.e-switch-wrapper.bar-color .e-switch-handle {
background-color: #fff;
}
/* handle color Switch */
.e-switch-wrapper.handle-color .e-switch-handle {
background-color: #e3165b;
}
.e-switch-wrapper.handle-color .e-switch-handle.e-switch-active {
background-color: #4d841d
}
.e-switch-wrapper.handle-color .e-switch-inner.e-switch-active,
.e-switch-wrapper.handle-color:hover .e-switch-inner.e-switch-active .e-switch-on {
background-color: #fff;
border-color: #ccc;
}
.e-switch-wrapper.handle-color .e-switch-inner,
.e-switch-wrapper.handle-color .e-switch-off {
background-color: #fff;
border-color: #ccc;
}
/* iOS Switch */
.e-switch-wrapper.custom-iOS .e-switch-inner.e-switch-active,
.e-switch-wrapper.custom-iOS:hover .e-switch-inner.e-switch-active .e-switch-on {
background-color: #3df865;
border-color: #3df665;
}
.e-switch-wrapper.custom-iOS {
width: 42px;
height: 24px;
}
.e-switch-wrapper.custom-iOS .e-switch-handle {
width: 20px;
height: 20px;
}
.e-switch-wrapper.custom-iOS .e-switch-handle.e-switch-active {
margin-left: -22px;
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
// To render Switch.
function App() {
return (
<div className="switch-control">
<div>
<h3>Customizing Color</h3>
</div>
<div>
<label htmlFor="switch1" style={{ padding: "10px 85px 10px 0" }}> Custom color </label>
<SwitchComponent id="switch1" cssClass='bar-color' />
</div>
<div>
<label htmlFor='switch2' style={{ padding: "10px 90px 10px 0" }}> Handle color </label>
<SwitchComponent id="switch2" cssClass='handle-color' checked={true} />
</div>
<div>
<label htmlFor='switch3' style={{ padding: "10px 103px 10px 0" }}> iOS Switch </label>
<SwitchComponent id="switch3" cssClass='custom-iOS' checked={true} />
</div>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));