How to set text in React Toggle Switch Button

4 Sep 20261 minute to read

Display custom text labels on React Toggle Switch Button states by setting the onLabel and offLabel properties. These labels clarify the React Toggle Switch Button function or state, improving accessibility and usability in interfaces where the toggle purpose is not immediately obvious.

In the following example, onLabel displays “ON” and offLabel displays “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'));

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