Set Text on Switch in React Toggle Switch Button component

20 Apr 2021 / 1 minute to read

This section explains how to set onLabel and offLabel texts on Switch. In the following example, onLabel is set as ON and offLabel is set as OFF.

Source

Preview

app.tsx

index.html

index.css

app.jsx

import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Switch.
class App extends React.Component<{}, {}> {
  public render() {
    return (
      <SwitchComponent onLabel="ON" offLabel="OFF" checked={true}  />
    );
  }
}
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/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>

#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

.e-switch-wrapper {
  margin: 18px;
}

import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Switch.
class App extends React.Component {
    render() {
        return (<SwitchComponent onLabel="ON" offLabel="OFF" checked={true}/>);
    }
}
ReactDom.render(<App />, document.getElementById('switch'));

Switch does not have text support for material themes, and does not support long custom text.