How to customize appearance in React Toggle Switch Button

4 Sep 20269 minutes to read

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

Customize React Toggle Switch Button bar and handle

Reshape and restyle the React Toggle Switch Button 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 React Toggle Switch Button 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 React Toggle Switch Button

Customize React Toggle Switch Button colors by modifying the background and border properties of the track and handle elements through the cssClass property. In the following example, the React Toggle Switch Button 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'));