How to change state in React Radio Button

4 Sep 20262 minutes to read

The React Radio Button component has two visual states that indicate its selection status:

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

Use the checked property to programmatically control the React Radio Button’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'));