Customize the appearance of a switch in React Switch component

2 Mar 20269 minutes to read

Apply custom CSS styling to Switch components by defining CSS rules and assigning them via the cssClass property. This approach enables complete visual control over Switch appearance without modifying component functionality.

Customize Switch bar and handle

Reshape and restyle the Switch track (bar) and thumb (handle) elements by applying custom CSS through the cssClass property. In the following example, the border-radius CSS property transforms the Switch bar (e-switch-inner) and handle (e-switch-handle) from circular to square appearance, demonstrating corner radius customization.

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

Customize Switch colors by modifying the background and border properties of the track and handle elements through the cssClass property. In the following example, the Switch bar (e-switch-inner) element receives custom background and border colors, overriding the default color scheme for branded styling.

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