Set text in React Switch component

2 Mar 20261 minute to read

Display custom text labels on Switch states by setting the onLabel and offLabel properties. These labels clarify the Switch 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'));

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