Change RadioButton state in React RadioButton component

25 Jan 2023 / 1 minute to read

The Essential JS 2 RadioButton contains 2 different states visually, they are as follows:

Checked
Unchecked

The RadioButton checked property is used to handle the checked and unchecked state. In the checked state an inner circle will be added to the visualization of RadioButton.

Source

Preview

app.jsx

index.html

index.css

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);
function App() {
    return (<ul>
      
      <li><RadioButtonComponent label="Option 1" name="state" checked={true}/></li>

      
      <li><RadioButtonComponent label="Option 2" name="state"/></li>
  </ul>);
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='radio-button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

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

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

li {
  list-style: none;
  margin: 25px auto;
}

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);

function App() {
  return (
  <ul>
      {/* checked state. */}
      <li><RadioButtonComponent label="Option 1" name="state" checked={true} /></li>

      {/* unchecked state. */}
      <li><RadioButtonComponent label="Option 2" name="state" /></li>
  </ul>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));