Set text in React Switch component

30 Jan 20231 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.

app.jsx

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

app.tsx

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.