Search results

Set Text on Switch in React Switch component

02 Feb 2023 / 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.jsx
index.html
index.css
app.tsx
Copied to clipboard
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Switch.
function App() {
    return (<SwitchComponent onLabel="ON" offLabel="OFF" checked={true}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));
Copied to clipboard
<!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/20.4.48/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/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>
Copied to clipboard
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

.e-switch-wrapper {
  margin: 18px;
}
Copied to clipboard
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Switch.
function App() {
  return (
    <SwitchComponent onLabel="ON" offLabel="OFF" checked={true}  />
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));

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