Right to left in React Radio button component

7 Aug 20231 minute to read

RadioButton component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in RadioButton component.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render RadioButton.
function App() {
    return (<ul>
    <li><RadioButtonComponent label="Option 1" name="default" enableRtl={true}/></li>
    <li><RadioButtonComponent label="Option 2" name="default" enableRtl={true}/></li>
    </ul>);
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));

app.tsx

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

enableRipple(true);

// To render RadioButton.
function App() {
  return (
    <ul>
    <li><RadioButtonComponent label="Option 1" name="default" enableRtl={true} /></li>
    <li><RadioButtonComponent label="Option 2" name="default" enableRtl={true} /></li>
    </ul>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));