Change radiobutton state in React Radio button component

30 Jan 20232 minutes 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.

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

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>
          {/* 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'));