Customize the appearance of a switch in React Switch component

7 Aug 20239 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';

function App() {
    return (<div className="switch-control">
        <div>
            <h3>Customizing Shape</h3>
        </div>
        <div>
            <label htmlFor="switch1" style=> Square Switch </label>
            <SwitchComponent id="switch1" cssClass="square" />
        </div>
        <div>
            <label htmlFor='switch2' style=> Bar and handle </label>
            <SwitchComponent id="switch2" cssClass="custom-switch" checked={true} />
        </div>
        <div>
            <label htmlFor='switch3' style=> 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';

function App() {
    return (
        <div className="switch-control">
            <div>
                <h3>Customizing Shape</h3>
            </div>
            <div>
                <label htmlFor="switch1" style=> Square Switch </label>
                <SwitchComponent id="switch1" cssClass="square" />
            </div>
            <div>
                <label htmlFor='switch2' style=> Bar and handle </label>
                <SwitchComponent id="switch2" cssClass="custom-switch" checked={true} />
            </div>
            <div>
                <label htmlFor='switch3' style=> 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';

function App() {
    return (<div className="switch-control">
        <div>
            <h3>Customizing Color</h3>
        </div>
        <div>
            <label htmlFor="switch1" style=> Custom color </label>
            <SwitchComponent id="switch1" cssClass='bar-color' />
        </div>
        <div>
            <label htmlFor='switch2' style=> Handle color </label>
            <SwitchComponent id="switch2" cssClass='handle-color' checked={true} />
        </div>
        <div>
            <label htmlFor='switch3' style=> 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';

function App() {
    return (
        <div className="switch-control">
            <div>
                <h3>Customizing Color</h3>
            </div>
            <div>
                <label htmlFor="switch1" style=> Custom color </label>
                <SwitchComponent id="switch1" cssClass='bar-color' />
            </div>
            <div>
                <label htmlFor='switch2' style=> Handle color </label>
                <SwitchComponent id="switch2" cssClass='handle-color' checked={true} />
            </div>
            <div>
                <label htmlFor='switch3' style=> iOS Switch </label>
                <SwitchComponent id="switch3" cssClass='custom-iOS' checked={true} />
            </div>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));