Change radiobutton state in React Radio button component

2 Mar 20262 minutes to read

The RadioButton component has two visual states that indicate its selection status:

• Checked - An inner circle appears inside the RadioButton, indicating it is selected
• Unchecked - The RadioButton appears empty, indicating it is not selected

Use the checked property to programmatically control the RadioButton’s selection state. When checked is set to true, the inner circle visual indicator is displayed to users.

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