Right to left in EJ2 JavaScript Radio button control

10 May 20232 minutes 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.

index.js
index.html
styles.css
ej.base.enableRipple(true);

// Initialize RadioButton component.
var radiobutton = new ej.buttons.RadioButton({ label: 'Option 1', name: 'default', enableRtl: 'true'});

// Render initialized RadioButton.
radiobutton.appendTo('#element1');

radiobutton = new ej.buttons.RadioButton({ label: 'Option 2', name: 'default', enableRtl: 'true'});
radiobutton.appendTo('#element2');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 RadioButton</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <input type="radio" id="element1">
        <input type="radio" id="element2">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-radio-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}