Customize the appearance of a switch in React Switch component

7 Aug 202311 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.

app.jsx

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'));

app.tsx

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'));

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.

app.jsx

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'));

app.tsx

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'));