Enable rtl in React Switch component

2 Mar 20261 minute to read

Enable right-to-left (RTL) layout support in the Switch component by setting the enableRtl property to true. RTL support mirrors the component layout and text direction, accommodating languages that read from right to left, such as Arabic, Hebrew, and Persian.

The following example demonstrates how to implement RTL support in the Switch component.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render Switch with checked state.
function App() {
    return (<SwitchComponent enableRtl={true} checked={true}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));

app.tsx

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

enableRipple(true);

// To render Switch with checked state.
function App() {
  return (
    <SwitchComponent enableRtl={true} checked={true} />
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));